Übergeben von Werten an benutzerdefinierte Direktive in Winkel js

Question

Ich bin neu zu Winkel js benutzerdefinierte Direktive, und ich habe die folgende Anweisung für 3-Wege-Kippschalter wie unten mit HTML und CSS erstellt.

JS-Code

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

Was ich erstellt habe, ist ziemlich statisch. Es wird nur 3 Tasten mit ihren statischen Werten geben. Ich muss es dynamisch machen, damit es für verschiedene Apps verwendet werden kann. Hier muss die Person, die diese Direktive verwenden wird, in der Lage sein, die Anzahl der benötigten Tasten und den ausgewählten Wert zu übergeben. Jeder Rat wird geschätzt.

Vielen Dank im Voraus.

Answer 1

Sie sind fast da. Sie können die items in Ihrem Bereich in Ihrer Vorlage verwenden. Verwenden Sie einfach ng-repeat durch die Elemente zu gehen, die Sie weitergeben:

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

hier ein fiddle ist.

Answer 2

Grundlegende Schritte zum Senden der Daten an die Direktive.

Auf Ihrer Richtlinie hinzugefügt Sie bereits den Umfang Variable:

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

senden die Daten über die Ansicht

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

In der Vorlage der Richtlinie wird auch hier die Daten

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