角js：從指令更​​新$觀察器不工作

Question

我有一個應用程序，我有一個2下拉框，一個州和另一個城市，並有一個指令，模擬了值不綁定任何東西。

我需要建立指令和這兩個下拉框之間的連接。

（在我開始之前，我想給予信貸，信貸是由於，喬納森·賴特：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 */ 

     } 
    }; 
}); 

正如你可以看到wha的要點我正在嘗試做，我正在試圖讓我的指令識別下拉菜單。

我在想我的指令應該有它自己的ng模型，並且ng模型的價值應該反映在模型的兩個下拉列表上，但我不確定如何去做。我環顧四周，無法找到任何能幫助我的東西。

[編輯 - 2014年1月28日 - 下午07:13東部時間]

以下Dalorzo的意見後，我創建了以下小提琴手：

這裏是一個$手錶的一種工作的jsfiddle控制器：

http://jsfiddle.net/W4ZSQ/

但是，刪除該表，並試圖使用$腕錶位於該指令時，這是行不通的。

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