值不通過角度定製指令

Question

我正在角度js中創建自定義複選框指令。我想將索引值傳遞給js，這樣我可以在每個複選框的內部使用ng-repeat時爲其生成唯一的id。由於某種原因，我不能夠給idIndex值傳遞給指令。誰能告訴我這將是問題

HTML

<ng-checkbox data-checked="notification.selected" idIndex="{{'nId-'+$index}}"></ng-checkbox> 

JS

angular.module("myApp") 
    .component("ngCheckbox", { 
     template: 
      '<div class="ng-control-checkbox">' + 
      '<input id="$ctrl.idIndex" type="checkbox" data-ng-model="$ctrl.checked" class="checkbox">' + 
      '<label for="$ctrl.idIndex">'+ 
      '<span data-ng-bind="$ctrl.label"></span>' + 
      '</label>' + 
      '</div>' + 
      '', 

     bindings: { 
      label: '=?', 
      checked: '=', 
      idIndex: '=?' 
     }, 
     controller: function() { 
      var $ctrl = this; 
     } 
    }); 

謝謝

Answer 1

您要定義指令中的情況下，屬性錯誤idIndex，在Angular中創建指令並使用它們E（元素）或A（屬性）有一定的規則。當有屬性的駝峯名稱時，必須遵循' - '語法，因此請將屬性更改爲id-Index。

當指令被編譯時，id-Index被轉換爲idIndex，就像在你的隔離範圍屬性中一樣。

<ng-checkbox data-checked="notification.selected" id-Index="{{'nId-'+$index}}"></ng-checkbox> 

也有這樣即改變屬性屬性全部小寫在你的指令，像下面

bindings: { 
      label: '=?', 
      checked: '=', 
      idindex: '=?' 
     } 

的你仍然可以保持你的HTML，因爲它是這樣

的另一種方式

<ng-checkbox data-checked="notification.selected" idIndex="{{'nId-'+$index}}"></ng-checkbox>