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

【问题标题】：Why is my angularjs check-box custom directive not working?为什么我的 angularjs 复选框自定义指令不起作用？
【发布时间】：2018-04-29 22:28:07
【问题描述】：

在我的应用中，我经常使用复选框。鉴于重复性我想从中制作一个自定义指令，但是当我在我的 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>

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

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

【问题讨论】：

我能看到的第一个错误是函数 CheckBox 和 activate 在定义之前被引用。控制台必须抛出未定义的符号错误
我可以看到你错过了关闭输入标签。
@RakeshBurbure 位于 data-ng-model 属性的末尾。

标签： javascript angularjs angularjs-directive

【解决方案1】：

您不能将 data-ng-model 设置为与 model attr 绑定。

您应该使用 model（如您在隔离范围中定义的那样）或 data-model。

<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>

【讨论】：