切换按钮指令AngularJS名单 [英] AngularJS list of toggle buttons directive

问题描述

我想创造的切换/开关列表中的可重用组件。

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

我已经做了一个＆LT;拨动＆GT; 指令，现在要一个＆LT;切换-列表＆gt; 包含多个＆LT;切换方式＆gt;的

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。

我希望我的＆LT;切换-列表＆gt; 返回如。阵列被选择的值。结果
如何实现这一点？结果
难道这样做，甚至一个很好的方式，还是我只是想推倒重来？

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',

现在你有机会通过链接功能的第四个参数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屋！