CODEWITHSUNDEEP
angularjsangularjs-directivescope
Sven Koluem
Sven Koluem

Reputation: 687

Directive creating new directives with own scope

I have a directive, which contains three buttons. If i hit one it should create a new instance of the directive with an own scope.

This new directive should get an title which is set to the parameter of the previous clicked button.

ng-click="add('blue');

So the directive has an isolated scope, set by:

scope: {},
restrict: 'E',
templateUrl: 'xyz.html'

And a link inside DDO:

controller: function($scope) {
  $scope.colorTypes = {
    "red" : true,
    "green" : false,
    "blue" : false
  }
}
link: function(scope, element, attrs) {
  scope.add = function(color){
    colorTypes = {
      "red": false,
      "green": false,
      "blue": false
    }
    colorTypes[color] = true;
    var el = $compile('<my-directive myColor='colorTypes'></my-directive>')(scope);
    element.parent().append(el);
  }
}

How can i get the value (new color) into the $compile for the new directive?

Upvotes: 0

Views: 72

Answers (2)

New Dev
New Dev

Reputation: 49590

You are doing almost everything correctly, except passing the value :)

You can either do string manipulation before to add the actual string of the color variable.

Or (I think, more elegantly), you could just create an element and add an attribute:

link: function(scope, element) {
  scope.add = function(colorType) {
    var colorTypes = {
      "green": false,
      "red": false,
      "blue": false
    };
    colorTypes[colorType] = true;

    var newElem = angular.element("<my-colors>");

    var childScope = scope.$new(false); // create a child scope for the directive
    childScope.colorTypes = colorTypes;

    $compile(newElem)(childScope);

    element.parent().append(newElem);
  }
}

Upvotes: 1

Omri Aharon
Omri Aharon

Reputation: 17064

Not sure exactly about your desired endpoint, but this shows how to use the value:

scope: {
     myColor: "="
},
link: function(scope, element, attrs) {
      scope.addDirective = function(color){
         var el = $compile('<my-directive myColor=\'{{color}}\'></my-directive>')(scope);
         element.parent().append(el);
      }
}

Notice you must have the myColor in scope since the directive is expecting it.

Fiddle

Upvotes: 0

Related Questions