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