AngularJS切换按钮指令列表

Question

我想创建一个可重复使用的切换/切换列表组件。

我已经制定了<toggle>指令，现在想要一个包含多个<toggle-list>的{​​{1}}。

<toggle>

<toggle-list>
  <toggle value="A">Toggle A</toggle>
  <toggle value="B">Toggle B</toggle>
</toggle-list>

这是我的working plnkr.

我希望我的app.directive("toggle", function(){ return { scope: {}, restrict: "E", transclude:true, templateUrl: "toggle-element.html", link: function(scope){ scope.toggled = false; scope.toggle = function(){ scope.toggled = !scope.toggled; } } } }); 返回例如。选择的值数组 我该如何实现呢？ 它甚至是一个很好的方法，或者我只是想重新发明轮子？

Answer 1

你的孩子指令中的

require: '^toggleList',

现在您可以通过链接功能的第四个参数访问togglelist。

function(scope, el, attrs, toggleListCtrl, $transclude)

然后你可以在父控制器上调用一个方法

来自toggle指令的

用子元素填充数组：

scope.rank = toggleListCtrl.addToggle(el);

父控制器中的

：

this.toggles = [];
this.addToggle = function (toggle) {
  var rank = this.toggles.push(toggle);
  return rank;
};