带有角度指令的三状态复选框

Three state checkbox with angular directive

本文关键字：状态 复选框 指令      更新时间：2023-09-26

我是 angularjs 的新手，我很难尝试创建一个指令来实现三态复选框。我想在我的指令中的隔离范围变量和我的控制器范围变量之间创建一个双向绑定。显然，不知何故，我已经把它翘起来了。

我的目标是能够在控制器中更新状态变量时更新

dom 中复选框的状态，并在用户单击复选框时更新控制器中的状态变量。

在谷歌机器上窥探后，我决定我需要在我的指令属性上设置一个$watch（我对它的了解是最好的）。我无法让它工作。当我的变量从控制器更改时，它永远不会被调用。下面是我的标记片段和我的指令的内容。有关详细信息，请参阅下面的小提琴。

<input checkbox-three-state='item.state' type='checkbox' /> 
directive('checkboxThreeState', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {
            state: '=checkboxThreeState'
        },
        link: function (scope, element, attributes) {
            element.on('click', function () {
                // update the controller scope
            });
            scope.$watch(attributes.checkboxThreeState, function (newVal, oldVal) {
                // update the dom
            });
        }
    }
}]);

我想我有我的另一个目标（单击时更新控制器范围）。

这是我的小提琴。

我现在

意识到我的问题框架很差，它真的应该问为什么我在指令中设置的手表不起作用。现在我知道我告诉它监视错误的范围属性，一个实际上并不存在的属性。我的过错。以前我告诉它注意我的指令属性 - 我只是复制了别人的例子，因为我是一只猴子。

scope: {
    state: '=checkboxThreeState'
},
link: function (scope, element, attributes) {
    // other stuff
    scope.$watch(attributes.checkboxThreeState, function (newVal, oldVal) {
        // update the dom
    });
}

在做了更多的窥探之后——我不知道为什么没有为像我这样的白痴更普遍地说明这一点——我意识到我必须指出我的范围内要监视的属性，即"状态"。

scope.$watch('state', function (newVal, oldVal) {
    // do my jam
});

现在我已经弄清楚了，这似乎完全很明显，但我可以很密集。

这是我现在的工作小提琴。

更新的问题

为什么当控制器更改传递到我的指令中的变量的值时，我的指令中的 watch 函数没有被触发？

答案摘要：

watch 函数应该监视指令范围变量上实际存在的变量。这在文档中从未详细说明，尽管对大多数人来说可能很明显，但我并没有立即将其放在一起。我的印象是 - 公平地说，有很多非常糟糕的例子严重误导了我 - 我应该注意我的指令属性，其值来自控制器范围。

相关文章：