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（属性）时有一定的规则。你必须遵循' - '当某个属性有camelCase名称时的语法，因此请将您的属性更改为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>

值不会在角度自定义指令中传递

1 个答案: