angular js：从指令更​​新 $watcher 不起作用

Question

我有一个应用程序，其中有 2 个下拉框，一个用于州，另一个用于城市，还有一个指令，其中包含与任何东西无关的值的模型。

我需要在指令和这两个下拉框之间建立连接。

（在我开始之前，我想在应得的地方给予赞扬，Jonathan Wright：Angular JS - Mapquest）

<select ui-select2="select2Options" ng-model="LocationModel.State">
    <option value=""></option>
    <option ng-repeat="state in states" value="{{state.id}}">{{state.name}}</option>
</select>
<select ui-select2="select2Options" ng-model="LocationModel.City">
    <option value=""></option>
    <option ng-repeat="city in cities" value="{{city.id}}">{{city.name}}</option>
</select>

这是我的 html 指令模板：

<map class="mapper" height="400" width="700"></map>

这是 angular 指令（这不起作用）

mapapp.app.directive('map', function (logger) {
    var directiveDefinitionObject = {
        restrict: 'E',
        template: '<div id="map"></div>',
        link: function link(scope, element, attrs)
        {
            var map_height = attrs['height'] || 400;
            var map_width = attrs['width'] || 400;
            $('#map').css('width', map_width).css('height', map_height);

            //somehow get the scope values to show up here every time
            //the dropdown gets selected
            var city = scope.LocationModel.City;
            var state = scope.LocationModel.State;

            /* do mapping logic here  */

        }
    };
});

正如您所看到的我正在尝试做的事情的要点，我正在尝试让我的指令识别下拉菜单。

我在想我的指令应该有它自己的 ng-model，并且 ng-model 的值应该反映在模型的两个下拉列表中，但我不完全确定如何做到这一点。我环顾四周，找不到任何可以帮助我的东西。

[编辑 - 2014 年 1 月 28 日 - 东部时间晚上 7:13]

按照 Dalorzo 的建议，我创建了以下提琴手：

这是一个在控制器中工作的 $watch 的 jsfiddle：

http://jsfiddle.net/W4ZSQ/

但是，当移除此手表并尝试使用指令中的 $watch 时，它不起作用。

http://jsfiddle.net/W4ZSQ/1/

[编辑 - 2014 年 1 月 28 日 - 东部时间晚上 10:52]

想通了。由于我两次调用 LocationCtrl，我认为范围模型将在两个 html 元素之间共享。显然情况并非如此；发生的事情是我创建了范围模型的另一个实例，其中范围将为下拉更新，但不是指令。通过在一个范围内共享它们，可以看到值“LocationModel.State”已更改。

http://jsfiddle.net/W4ZSQ/2/

我找到了一个关于如何让一个控制器与另一个控制器通信的资源丰富的链接：

http://onehungrymind.com/angularjs-communicating-between-controllers/

Answer 1

这就是你需要在你的指令中做的就是使用一个新的属性，它将被添加到你的 html 中，比如：

data-bound-field="LocationModel.State"

例如：

<map class="mapper" height="400" width="700" data-bound-field="LocationModel.State"></map>

然后在你的指令代码中：

scope.$watch(attrs.boundField,function(newValue,oldValue, scope){
     /* do mapping logic here  */
});