javascript - Angular 指令默认为选中状态

Question

我有一个为“开关”创建的指令(元素)，它使用 input[checkbox]。

只要不选中复选框的初始状态，一切就可以正常工作。但如果我想将初始状态设置为已检查(基于我的 Controller 值)，那么它总是相反的。为什么当 Controller 变量说应该检查该值时却没有检查？

HTML

<a-switch toggle-state="vm.doSomething"></a-switch>

指令 Html

<div class="switch-container">
    <input type="checkbox" id="switch" />
    <label for="switch" class="pm-switch"></label>
</div>

Javascript Controller

vm.doSomething = {
    state: true
};

指令

angular.module('material')
    .directive('aSwitch', [
        '$timeout', function($timeout) {
            return {
                templateUrl: 'elements/material/switch/switch.html',
                transclude: false,
                restrict: 'E',
                scope: {
                    toggleState: '=',
                },
                link: function (scope, element) {
                    element.on('click touchstart', function (event) {
                        if (event.srcElement && event.srcElement.id && event.srcElement.id === "switch") {
                            event.stopPropagation();

                            $timeout(function() {
                                scope.toggleState.state = !scope.toggleState.state;
                            });
                        }
                    });
                }
            };
        }
    ]);

我意识到为了设置通用的检查状态

<input type="checkbox" />

我只需要添加“checked”属性，例如

<input type="checkbox" checked />

但是如果它在我的指令的 html 中，我该怎么做？

Answer 1

由于您使用的是其中包含 scope: {toggleState: '='} 的独立作用域，因此您应该直接将该 toggleState.state 绑定(bind)到输入框在模板内，以便链接函数代码将被删除，因为 toggleState 已使用 toggle-state 属性以两种方式与 Controller 范围变量绑定(bind)

Directive.html

<div class="switch-container">
    <input type="checkbox" id="switch" ng-model="toggleState.state"/>
    <label for="switch" class="pm-switch"></label>
</div>