Question

我是角色新手，我有一个要求，我需要在自定义元素指令<radio-button>中添加许多自定义属性。目前，我这样做：

<radio-button one-attr="some value" two-attr="some string" three-attr="some other string"><radio-button>

我在页面上有很多单选按钮，并且在该页面上为每个自定义指令编写自定义属性看起来很混乱。所以，我正在寻找一种替代方案，我可以传递一个循环在每个radio-button自定义指令上的javascript数组对象。

例如：（ In controller ）

  $scope.values = [{
       'one-attr': 'some value',
       'two-attr': 'some other value',
       'three-attr': 'another value',
       /* and so on... */
  },
  {
       /* another custom attribute set */
  }
  /* so on */
  ]

然后到我的自定义指令，我将传递custom attribute directive，如下所示：

  <radio-button ng-repeat="(key, value) in values" loop-attributes="key, value"></radio-button>

上面loop-attributes是应用于自定义元素指令的自定义属性指令。

请建议如何执行此操作。

如果我出错了，请建议我如何处理。

Answer 1

您将需要使用一个将其自身替换为其他指令的指令。您可以看到here了解如何执行此操作。我已经制作了jsfiddle来向您展示这是如何运作的。重复必须在外部元素上，而不是包含指令本身的元素。这是因为在custom-attr被解析之前将解析您的ng-repeat指令，因此它还没有attr的值。

编辑：对不起，我在链接功能结束时省略了导入步骤。 This更新的小提琴应该有用。您需要重新编译该指令，以使您添加的ng-click指令实际起作用。您还必须确保通过传入或使用ng-click

将您绑定ng-click="$parent.foo()"的功能提供给该范围。

Answer 2

你很可能不得不使用$ compile服务，因为radiobutton是一个自定义指令。你可以有一个父指令，它有一个属性列表，并在指令中创建带有属性的radiobutton元素，然后编译它。例如，使用了输入类型。

http://plnkr.co/edit/7ANndIuHCFaGyjWkw7sa?p=preview

// custom element
.directive('customInput', function() {
  return {
    replace: true,
    restrict: 'E',
    template: '<input type="text"></input>'
  };
})

//wrapper directive
.directive('customInputAttr', function($compile) {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      // This could be set even in controller
      scope.elemAttrs = [{
        'class': 'class1',
        'ng-model': 'input1'
      }, {
        'class': 'class2',
        'ng-model': 'input2'
      }];

      angular.forEach(scope.elemAttrs, function(elemAttr) {
        var customInputElem = angular.element('<custom-input></custom-input>');
        angular.forEach(elemAttr, function(value, key) {
          customInputElem.attr(key, value)
        });

      var elem = $compile(customInputElem)(scope);
      element.append(elem);
      });

    }
  };
})

循环提供的属性

2 个答案: