Question

在我的应用中，我经常使用复选框。考虑到重复性，我想用它来制作一个自定义指令，但是当我在我的html中调用该指令时，它不会检查复选框。我无法弄清楚我错过了什么。任何建议将不胜感激。

HTML

<div class="col-xs-12 col-sm-9 col-md-9">
    <input type="checkbox"
       class="form-control"
       name="{{attrs.name}}" 
       id="{{attrs.id}}"
       data-ng-model="model">
    <label for="{{attrs.id}}">
        <span>{{labelText}}</span>
    </label>
</div>

JS

(function () {
'use strict';
angular
    .module('app.directives')
    .directive('ccCheckBox', checkbox);

checkbox.$inject = [];
/* @ngInject */
function checkbox() {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            labelText: '@'
        },
        templateUrl: './src/_directives/checkbox.html',
        link: CheckBox
    };
    function CheckBox(scope, attrs){
        activate();

        function activate(){
            scope.attrs = attrs;
        }
    }
}
})();

在我的代码中调用 ..

 <cc-check-box 
      data-label-text="Test CheckBox Label"
      data-name="checkBoxGrp"
      data-id="myCheckBox"
      data-for="myCheckBox"
      data-ng-model="vm.model.myCheckBoxValue">
 </cc-check-box>

开发工具控制台没有错误。

Answer 1

您无法将 data-ng-model 设置为与模型 attr绑定。

您应该使用模型（如您在隔离范围中定义的）或数据模型。

<cc-check-box 
    data-label-text="Test CheckBox Label"
    data-name="checkBoxGrp"
    data-id="myCheckBox"
    data-for="myCheckBox"
    data-model="vm.model.myCheckBoxValue"
></cc-check-box>

为什么我的angularjs复选框自定义指令不起作用？

1 个答案: