how to use angular expression value as an attribute for html element

Question

I have a scenario where i need to apply different directives (attribute) to a DIV inside a Angular bootstrap Modal at runtime (button click).

I would know the name of the directive to apply. But i am not able to figure out how to change the template at runtime to add necessary directive name as an attribute to the DIV.

consider this plunker

Basically i want the div to have child directive as an attribute using synstax like this <div {{child}}></div>

So when it works, it should generate <div child-directive></div>

How can this be done? is this even possible? What is the best way to change the template before opening the Modal so that it wires up correctly when loaded.

Michal Kucaj · Accepted Answer · 2016-01-26 12:23:28Z

1

// Code goes here

var app = angular.module('main-module', ['ui.bootstrap']);

app.directive('parentDirective', function($uibModal, $compile) {
    return {
      restrict: 'E',
      template: "<h2>I am Parent</h2><button ng-click='click()'>Click Me</button>",
      scope: {
        child:'@'
      },
      link: function($scope, elem, attrs) {
        console.log('?',$scope.child, $scope);

        var template = "<div><h3>This is modal</h3>" 
              + "Ideally you should see the child directive below"
              + "<hr />"
              + "<div "+ $scope.child + "></div></div>"; 

        $scope.click = function() {
          $uibModal.open({
            template: template,
            scope: $scope,
            size: 'lg',
          });
        }
      }
    };
  })
  .directive('childDirective', function() {
    return {
      restrict: 'A',
      template: "<div><h4>I am Child</h4><a ng-click='click()'>Click Me!!</a></div>",
      replace: true,
      scope: {},
      link: function($scope, elem, attrs) {
        $scope.click = function() {
          alert("I am in child scope");
        }
      }
    };
  }).directive('anotherChildDirective', function() {
    return {
      restrict: 'A',
      template: "<div><h4>I am another Child</h4><a ng-click='click()'>Click Me!!</a></div>",
      replace: true,
      scope: {},
      link: function($scope, elem, attrs) {
        $scope.click = function() {
          alert("I am in child scope");
        }
      }
    };
  });;

edited Jan 26, 2016 at 12:23

answered Jan 22, 2016 at 12:34

Michal Kucaj

6916 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sagar Over a year ago

Can you share a plunker where it works? I tried what you said above and it doesnt work.I still dont see child directive in the modal

sagar Over a year ago

I see your plunker has hardcoded directive. That misses the entire point. I want to specifiy the directive name at runtime. You have changed the modalContent.html like this. (<div child-directive></div>) but i dont want to do that. I need to evaluate the scope variable and place that value as an attribute to the div.

Michal Kucaj Over a year ago

Ok i miss understood i think it will be problem with register and execute child directive with your way

Michal Kucaj Over a year ago

ok i found solution for this problem :) plunker is ready here:plnkr.co/edit/Du5tmdjCmJDsmJxeGbhK?p=preview if this are satisifed you please accept my answer

sagar Over a year ago

After trying hard to somehow make it work the way i wanted to as per my question above, i did eventually did the same as Mike86, I had to use template instead of templateUrl, and generate template at runtime. Hence marking this as answer.

Collectives™ on Stack Overflow

how to use angular expression value as an attribute for html element

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related