Question

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

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

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

因此该指令具有一个独立的范围，由：

设置

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

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

除了传递值之外，你几乎正在做所有事情：）

您可以先添加字符串操作，然后添加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);
  }
}

Answer 2

不确定您所需的终点，但这显示了如何使用该值：

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

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

2 个答案: