指令创建具有自己范围的新指令

Question

我有一个指令，其中包含三个按钮。如果我点击一个，它应该创建一个具有自己范围的指令的新实例。

这个新指令应该有一个标题，该标题设置为上一个单击按钮的参数。

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

所以指令有一个独立的作用域，设置为：

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

还有一个 link 里面 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);
  }
}

如何将值（新颜色）获取到新指令的 $compile 中？

Answer 1

不确定您想要的端点，但这显示了如何使用该值：

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);
      }
}

请注意，您必须在范围内包含 myColor，因为指令需要它。

Fiddle

Answer 2

除了传递值 :)

，您几乎做对了所有事情

您可以在添加 color 变量的实际字符串之前进行字符串操作。

或者（我认为更优雅），您可以只创建一个元素并添加一个属性：

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);
  }
}

指令创建具有自己范围的新指令

Directive creating new directives with own scope

scope

angularjs

angularjs-directive