州用と都市用の 2 つのドロップダウン ボックスと、何にも関連付けられていない値のモックアップを持つディレクティブがあるアプリケーションがあります。
ディレクティブとこれら 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 の値はモデルの 2 つのドロップダウンに反映されるべきだと考えていますが、その方法が正確にはわかりません。私は周りを見回しましたが、私を助けるものを見つけることができませんでした.
[編集 - 2014 年 1 月 28 日 - 東部時間午後 7 時 13 分]
Dalorzo のアドバイスに従って、次のフィドラーを作成しました。
コントローラーで動作する $watch の jsfiddle を次に示します。
ただし、このウォッチを削除して、ディレクティブにある $watch を使用しようとすると、機能しません。
[編集 - 2014 年 1 月 28 日 - 東部時間午後 10 時 52 分]
それを考え出した。LocationCtrl を 2 回呼び出していたので、両方の html 要素間でスコープ モデルが共有されると考えました。明らかにそうではありません。何が起こるかというと、スコープモデルの別のインスタンスを作成すると、ドロップダウンのスコープが更新されますが、ディレクティブは更新されません。それらを 1 つのスコープで共有することにより、値「LocationModel.State」が変更されたことがわかります。
あるコントローラーを別のコントローラーと通信させる方法についての有益なリンクを見つけました。
http://onehungrymind.com/angularjs-communicating-between-controllers/