javascript - 切换按钮的指令

Question

我正在尝试制定一个指令来创建一个是/否切换按钮。现在我不知道我的 HTML 布局是否正常，但到目前为止我是这样做的:

<div class="toggle" toggle-button"><input type="checkbox" ng-model="confirms" /></div>
<div class="toggle" toggle-button"><input type="checkbox" ng-model="listresults" /></div>

这是应该添加到 UI 中的 HTML，以便我稍后可以在 Controller 中使用该模型，我实际上有一个设置页面，其中包含很多是/否按钮，就像这个例子一样。

我想要的工作方式是当指令初始化按钮时，它应该根据每个 ng-model 的值显示按钮红色或绿色(如果 confirms = false，按钮应该是红色的，如果 listresults是真的，第二个按钮应该是绿色的)。现在，当我按下按钮时，它应该将 ng-model 的值从 false 更改为 true，反之亦然，并且应该在切换类附近添加或删除一个“on”类，以便我可以在其中进行设计。

我的按钮的完整 HTML 应如下所示:

<div class="toggle" toggle-button>
    <input type="checkbox" ng-model="listresults" />
    <div class="toggle-inner">
        <div class="toggle-inner-yes"></div>
        <div class="toggle-inner-no"></div>
    </div>
</div>

到目前为止我是这样做的，我不确定我的做法是否正确，如果您有更好的想法请告诉我。

myApp.directive('toggleButton', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr) {

            // add elem
            var html = angular.element('<div class="toggled"><div class="on"></div><div class="off"></div></div>');
            elem.append(html);

            elem.bind('click', function() {
                alert('a');
            });
        }
    }
});

现在我只是在按钮中添加了其余的 HTML 并添加了一个点击事件，但我不知道如何从输入中获取每个 ng-model 的值到指令中，更不用说从中更改 ng-model 了从 true 到 false，并在按钮本身上添加或删除“on”类。

我感谢任何帮助或建议。

Answer 1

您可以尝试以下操作:http://plnkr.co/edit/yRWumtd7RwLksFowBRmc?p=preview

通过属性将模型传递给指令。使用指令范围定义中的 '=' 值对传递的属性进行双向绑定(bind)。在您的指令中使用 ng-class 指令在切换按钮上切换类。使用 ng-click 切换绑定(bind)到外部 Controller 范围的数据。

HTML

<div ng-controller="ctrl">
  <div toggle="item" ng-repeat="item in items"></div>
</div>

JavaScript

angular.module('app',[]).
  controller('ctrl', ['$scope', function($scope) {
    $scope.items = [{
      text: 'Setting 1',
      checked: false
    }, {
      text: 'Setting 2',
      checked: false
    }, {
      text: 'Setting 3',
      checked: false
    }]
  }]).
  directive('toggle', function() {
    return {
      scope: {
        toggle: '='
      },
      template: '<div ng-click="toggle.checked=!toggle.checked" ng-class="{\'toggle\':true, \'toggle-inner-yes\':toggle.checked, \'toggle-inner-no\':!toggle.checked}">{{toggle.text}}</div>',
      replace: true
    }
  });

CSS

.toggle {
  border: 1px solid silver;
  display: inline-block;
  margin: 0.5em;
  padding: 0.5em;
  color: white;
}

.toggle-inner-yes {
  background-color: green;
}

.toggle-inner-no {
  background-color: red;
}