javascript - 将值传递给angular js中的自定义指令

Question

我是 angular js 自定义指令的新手，我已经使用 html 和 css 创建了以下用于 3 向切换开关的指令。

JS代码

(function () {
  "use strict";
  var directiveId = "myToggle";
  angular.module("myApp").directive(directiveId, [function () {
    return {
        restrict: 'E',
        template:
                '<div class="ng-toggle-switch">'+
                '   <input type="radio" class="ng-toggle-switch-input" name="view"  id="selected" checked>'+
                '   <label for="selected" class="ng-toggle-switch-label">selected</label>'+

                '   <input type="radio" class="ng-toggle-switch-input" name="view"  id="unselected1">'+
                '   <label for="unselected1" class="ng-toggle-switch-label">unselected</label>'+

                '   <input type="radio" class="ng-toggle-switch-input" name="view"  id="unselected2" >'+
                '   <label for="unselected2" class="ng-toggle-switch-label">unselected</label>'+
            '</div>',
        scope:{
            items:'=',
            selectedValue:'='
        },
        link: function(scope, element, attributes){
        }   
    }
}]);
})();

HTML

<my-toggle></my-toggle>

CSS

  .ng-toggle-switch {
      position: relative;
       width: 100%;
        border: 1px solid #0098F3;
        max-width: 323px;
        height: 34px;
        border-radius: 4px;
    }
    .ng-toggle-switch-label {
        float: left;
        text-align: center;
        cursor: pointer;
        padding-left: 16px !important;
        line-height: 34px;
        border-right: 1px solid #0098F3;
        padding-right: 16px;
        color: #0098F3;
    }
    .ng-toggle-switch-label:last-child
    {
        border: none;
    }
    .ng-toggle-switch-input {
      display: none;
    }
    .ng-toggle-switch-input:checked + .ng-toggle-switch-label {
        background: #0098F3;
        color: #fff;
    }

我创建的内容几乎是静态的。目前只有 3 个按钮具有静态值。我需要让它动态化，以便它可以在各种应用程序中使用。在这里我需要使用这个指令的人应该能够传递所需的按钮数量和选择的值。任何建议将不胜感激。

提前致谢。

Answer 1

你快到了。您可以在模板的范围内使用 items。只需使用 ng-repeat 遍历您传递的元素:

(() => {
  'use strict';

  angular.module('myApp', [])
    .controller('myController', ($scope) => {
      $scope.items = [{
        id: 1,
        label: 'low'
      }, {
        id: 2,
        label: 'medium'
      }, {
        id: 3,
        label: 'high'
      }, {
        id: 4,
        label: 'ultra'
      }];
    })
    .directive('myToggle', () => {
      return {
        restrict: 'E',
        template: '<div class="ng-toggle-switch">' +
          '<span ng-repeat="item in items">' +
          '<input type="radio" class="ng-toggle-switch-input" name="view" id="{{item.id}}">' +
          '<label for="{{item.id}}" class="ng-toggle-switch-label">{{item.label}}</label>' +
          '</span>' +
          '</div>',
        scope: {
          items: '=',
          selectedValue: '='
        },
        link: function(scope, element, attributes) {}
      }
    });
})();

这是一个 fiddle .