切换按钮指令的 AngularJS 列表 [英] AngularJS list of toggle buttons directive

问题描述

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

I wanted to create a reusable component of toggles/switches list.

我已经创建了一个 指令，现在想要一个包含多个 的 代码>的.

I've already made a <toggle> directive, and now want a <toggle-list> containing multiple <toggle>'s.

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

.

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

这是我的 工作 plnkr.

我希望我的 返回例如.所选值的数组.
我该如何实施?
它甚至是这样做的好方法，还是我只是想重新发明轮子?

I want my <toggle-list> to return eg. array of values that are selected.
How do I implement this?
Is it even a good way of doing this, or am I just trying to reinvent the wheel?

推荐答案

在您的子指令中

require: '^toggleList',

现在您可以通过链接函数的第四个参数访问切换列表.

now you have access to togglelist via the fourth parameter of the link function.

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

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

then you could call a method on the parent controller

来自切换指令的子元素填充数组:

from the toggle directive fill an array with the child elements :

scope.rank = toggleListCtrl.addToggle(el);

在父控制器中:

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

这篇关于切换按钮指令的 AngularJS 列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！