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

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

指令（'checkboxThreeState'，['$compile'，函数（$compile）{
返回{
限制：“A”，
范围：{
状态：'=checkboxThreeState'
},
链接：功能（范围、元素、属性）{
元素上（'单击'，函数（）{
//更新控制器作用域
});
作用域.$watch（attributes.checkboxThreeState，函数（newVal，oldVal）{
//更新dom
});
}
}
}]);

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

---

这是我的。

我现在意识到我的问题框架不好，它真的应该问我在指令中设置的手表为什么不工作。现在我知道我告诉它去看错误的scope属性，一个实际上不存在的属性。我有罪。之前我告诉它注意我的指令属性——我刚刚复制了其他人的例子，因为我是一只猴子

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函数应该监视指令范围变量中实际存在的变量。文档中从未详细说明过这一点，尽管这对大多数人来说可能是显而易见的，但我并没有立即将其放在一起。我当时的印象是——公平地说，有很多非常糟糕的例子严重误导了我——我应该关注我的指令属性，它的值来自控制器范围。

出于好奇，你为什么选择状态不确定的复选框，与传统的多值输入（如下拉/收音机）相反，似乎正试图彻底改造

ng模式

和

ng更改

@charlietfl。显示名称，

ng model

默认情况下将数据绑定回范围。这里没有必要重新发明轮子。更好的是，如果你希望点击改变多个州的状态效果，Radio+一些CSS黑客可能是更好的选择。了解更多有关用例的信息将使我们能够为您提供更好的建议。还要注意，angular core之外更新范围的事件（如单击处理程序）需要通知angular更新视图。在窗体控件的方式上，没有太多的东西是用core angular做不到的。。。先学习角度法。。。api中列出了每个表单元素指令。简言之，你所做的并不意味着什么sense@DisplayName啊，那么也许这把小提琴能为你指明正确的方向。由于您没有指向树，我假设您的意思是这样做：（在单个复选框上循环浏览各种选项）