將值傳遞給angular js中的自定義指令

Question

我是angular js自定義指令的新手，並且為以下3種方式的html和css切換開關創建了以下指令。

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

這是一個小提琴 。

Answer 2

完成將數據發送到指令的基本步驟。

在您的指令上，您已經添加了scope變量：

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

在視圖上發送數據

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

在指令的模板中，您可以循環數據

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