次のようなものを書くことができるように、マップ コンポーネントを作成するためのディレクティブを作成しようとしています。
<map></map>
ディレクティブは次のようになります。
angular.module('myApp')
.directive('map', function (GoogleMaps) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.$watch('selectedCenter', function() {
renderMap(scope.selectedCenter.location.latitude, scope.selectedCenter.location.longitude, attrs.zoom?parseInt(attrs.zoom):17);
});
function renderMap(latitude, longitude, zoom){
GoogleMaps.setCenter(latitude, longitude);
GoogleMaps.setZoom(zoom);
GoogleMaps.render(element[0]);
}
}
};
});
問題は、ディレクティブ内の 'watch' が、コンポーネントの再利用性を考えるとあまりよく見えないことです。したがって、次のようなことができるのが最善だと思います。
<map ng-model="selectedCenter.location"></map>
しかし、カスタム ディレクティブ内で角度ディレクティブを使用するのが良いことなのか、カスタム ディレクティブのリンク関数の ng-model 属性で示されているオブジェクトを取得する方法がわかりません。