将 Angular 自定义指令绑定到模型的问题答案

【问题标题】：Problems binding Angular custom directive to model将 Angular 自定义指令绑定到模型的问题
【发布时间】：2013-12-16 22:41:03
【问题描述】：

我试图让两个多选小部件保持同步，但只能使行为朝着一个方向发展。

一个小部件在主页上，另一个在有角度的 ui-bootstrap 模式中。两个多选小部件都是使用自定义指令创建的。该指令的每个实例都绑定到不同的控制器（MainCtrl 和 ModalCtrl）。指令的每个实例的“selected”属性都绑定到它们各自控制器中的作用域变量，该变量又绑定到模型中的相同 getter 方法 (getSelectedFilters)。

如果我更改主页上小部件上的选择，则更改会反映在模式面板中的小部件中。但是，如果我在模式面板中更改选择，即使模型已正确更新，更改也不会反映在主页上的小部件中（即使小部件“显示当前选择”按钮将显示正确的选择）没有）。我完全不明白其中的区别。

这是一个精简的 plnkr 说明我的问题。

http://plnkr.co/edit/nC5bkGFE4LkYZsaxdjL7?p=preview

我是 Angular 的新手，如果我在模型中的数据发生变化时，为什么我在主页上的指令没有正确更新，我将不胜感激。

【问题讨论】：

当我尝试你的 plunker 时，更新似乎可以双向工作。不能直接在主页面添加，但是在主页面移除元素会体现在modal上，在modal中添加会体现在主页面上。
是的，我的错。在我发布我的问题后，我让一个朋友玩它。他纠正了我的问题。这是我第一次使用 plnkr 而不是 jfiddle。很高兴知道更新会自动显示而无需像 jfiddle 那样更改链接！我会尽快发布答案。
（我最初发布的是第 7 版）

标签： angularjs jquery-select2 angular-ui-bootstrap

【解决方案1】：

plnkr 的第 7 版是我最初发布的。

基本上，只要值发生更改，就在 $scope.selected 上调用 $apply 并不足以通知其他指令更改。我还必须设置一个 $watch：

$scope.$watch('selected', function(newVal, oldVal) {
    select2.val(newVal).select2(options);
});

当我在主页上修改 select2 指令时，我现在完全不清楚为什么模式中的 select2 指令在没有 $watch 的情况下更新。如果有人能解释那里发生了什么，我会很高兴的！对于任何可能知道的人，请返回第 7 版以了解我的意思。

【讨论】：