Angular 指令默认选中

Question

我有一个为 "switch" 创建的指令（元素），它使用 input[checkbox]。

只要不选中复选框的初始状态，一切正常。但是如果我想将初始状态设置为选中（基于我的控制器值），那么它总是相反的。为什么当控制器变量说它应该是值时却没有检查值？

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 控制器

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 绑定到模板中的输入框，这样 link 函数代码将使用 toggle-state 属性

以两种方式将 toggleState 与您的控制器范围变量绑定，从而将其删除

Directive.html

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

Angular 指令默认选中

Angular directive default to checked

html

javascript

checkbox

angularjs

angularjs-directive