0

我有一个应用程序，其中有 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>

这是角度指令（这不起作用）

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/

4

1 回答 1

1

This is what you need todo in your directive is use a new attribute that will be added to your html, something like:

data-bound-field="LocationModel.State"

For example:

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

Then in your directive code:

scope.$watch(attrs.boundField,function(newValue,oldValue, scope){
     /* do mapping logic here  */
});
于 2014-01-28T21:56:23.550 回答