在加载指令模板之前未初始化指令的范围，导致未加载谷歌地图答案

【问题标题】：Directive's scope not initialized prior to loading the directive template leading to not loading of Google Map在加载指令模板之前未初始化指令的范围，导致未加载谷歌地图
【发布时间】：2014-06-16 19:59:45
【问题描述】：

我正在我的应用程序中使用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:{}
            }
        },
    };
});

【问题讨论】：

标签： javascript angularjs google-maps angularjs-directive angularjs-google-maps

【解决方案1】：

我知道你问的不是ngMap，但我发现这种方式比http://angular-google-maps.org/容易得多

这里是 plunker，http://plnkr.co/edit/ZwUARi7OC2vUnJS6UdBD?p=preview

这是你的指令

var app = angular.module('myApp', ['ngMap']);

app.directive('myDir', function() {
  return {
    restrict: 'AE',
    template: '<map center="{{mapOptions.center}}" zoom="13" draggable="true" pan="1"></map>',
    link: function(scope, elem, attrs) {
    },
  };
});

应该没那么难。顺便说一句，我是ngMap的创建者

【讨论】：

哦，pub :-) 我写了两个控制器示例，其中映射为自定义指令，在一种情况下，控制器在指令编译之前被初始化。为了能够处理这种情况，我编写了一个如何收费的服务来解决一个承诺，只有当地图完全加载时。创建这个指令是个好主意，但是你必须创建你自己的对象，用新的 google.maps.Map。一些细节；正如 gmap 文档中所述，它仅适用于具有固定高度的 div。