Question

我有一组代码，我将其重新用于自定义复选框：

<input type="checkbox" ng-model="myModel" name="box" ng-disabled="isDisabled" />
<label class="control-label" for="box"><span></span>I am a Checkbox</label>

我想创建一个自定义指令来复制相同的功能，类似于：

<custom-checkbox ng-model="myModel" my-label="I am a Checkbox" my-id="checkbox1" ng-disabled="isDisabled"></custom-checkbox>

我已经搜索了所有帮助文件，但无法弄清楚这一点。我有以下指令，它不接近工作:(

app.directive('customCheckbox', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
          ngModel: '=',
          myLabel: '=',
          myId: '=',
          ngDisabled: '=',
        },
        template: '<div><input type="checkbox" id="{{myId}}" ng-disabled="{{ngDisabled}} ng-model="{{ngModel}}"  />' +
        '<label class="control-label" for="{{myId}}" >' +
        '<span></span>{{myLabel}}</label></div>'
    }
});

Answer 1

为什么要将所有这些属性都包含在模板中？

    template: '<div><input type="checkbox" id="{{myId}}" ng-disabled="{{ngDisabled}} ng-model="{{ngModel}}"  />' +
    '<label class="control-label" for="{{myId}}" >' +
    '<span></span>{{myLabel}}</label></div>'

This有效。

此外，“=”表示角度表达，“我是标签”不是一个。

自定义复选框的角度指令

1 个答案: