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。

Answer 2

完成将数据发送到指令的基本步骤。

在你的指令上你已经添加了范围变量：

scope:{
    items:'=',
    selectedValue:'='
}

在视图上发送数据

<my-toggle items="data"></my-toggle>

在指令的模板中，您可以循环数据

<div ng-repeat="item in items">{{item}}</div>

将值传递给角度js中的自定义指令

2 个答案: