アプリでGoogle-maps-angularディレクティブを使用しており、そのディレクティブを自分のディレクティブ内にラップしようとしています。コントローラーでマップ オブジェクトを定義すると、正常に動作します。しかし、リンク関数内でマップ オブジェクトを定義すると、マップ オブジェクトを取得していないようです。
ディレクティブのコントローラー内でマップ オブジェクトを定義しようとしましたが、マップも読み込まれませんでした。マップがロードされない理由を説明する html をロードする前にスコープが初期化されていないようですが、なぜそうなのかを理解できませんでした。外部コントローラーの代わりに、ディレクティブ内でマップ オブジェクトを定義できる他の方法はありますか?
また、google-map のスコープ内 ( angular.element("google-map >").scope() を使用) を見ると、中心が定義されていることが示されるため、マップが読み込まれない理由がわかりません。
var app = angular.module('myApp',[
'google-maps',
])
app.directive('myDir', function($http) {
return {
restrict: 'AE',
template: '<google-map center="map.center" zoom="13" draggable="true" pan= "1" control="map.control"></google-map>',
link: function(scope, elem, attrs) {
scope.map = {
center: {
latitude: 40.35,
longitude: -74.6702
},
control:{}
}
},
};
});