Question

我是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
            });
        }
    }
}]);

我认为我有另一个目标（点击更新控制器范围）。

这是我的fiddle。

Answer 1

我现在意识到我的问题框架很差，它本应该问我为什么我在指令中设置的手表无效。现在我知道我告诉它要看错误的范围属性，实际上并不存在。 Mea culpa。以前我告诉它要看我的指令属性 - 我刚刚复制了别人的例子，因为我是一只猴子。

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
});

现在我已经发现它看起来很明显，但我可以非常密集。

这是我现在正在工作的fiddle。

更新问题

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

答案摘要：

watch函数应该监视指令范围变量中实际存在的变量。这在文档中从未明确说明，虽然对大多数人来说可能是显而易见的，但我没有立即将它们放在一起。我有一种印象 - 为了对自己公平，有很多非常糟糕的例子严重误导我 - 我应该注意我的指令属性，其价值来自控制器范围。

角度指令

1 个答案: