Question

我有一个问题，在Angularjs指令中，在呈现模板之前首先调用控制器中的initialize（）。这意味着我无法检索动态ID。

我正在尝试为每张地图设置不同的ID，但由于动态ID，目前正在崩溃下面的代码。

map = new google.maps.Map(document.getElementById('addressMap-' + $scope.mapId), mapOptions);

完整代码，有什么想法吗？欢呼声

app.directive('googleMap', function ($compile) {

var mapId = 1;
var linker = function (scope, element) {
    scope.mapId = mapId++;
};

return {
    require: '^addressBasedGoogleMap',
    restrict: "EA",
    scope: {
        address: "=",
        zoom: "=",
        mapId: "="
    },
    template : '<div id="addressMap-{{::mapId}}" style="height: 200px;"></div>',
    link: linker,
    controller: function ($scope) {
        var geocoder;
        var latlng;
        var map;
        var marker;

        var initialize = function () {
            geocoder = new google.maps.Geocoder();
            latlng = new google.maps.LatLng(-34.397, 150.644);
            var mapOptions = {
                zoom: $scope.zoom,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('addressMap-' + $scope.mapId), mapOptions);
        };
        var markAdressToMap = function () {
            geocoder.geocode({ 'address': $scope.address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                }
            });
        };
        $scope.$watch("address", function () {
            if ($scope.address != undefined) {
                markAdressToMap();
            }
        });
        initialize();
    }
};

}）;

Answer 1

我会尝试推迟initialize()，直到$scope.mapId出现。一种方法是：

$scope.$watch('mapId', function(oldval, newval) {
    if (!oldval && newval) {
        initialize();
    }
});

Answer 2

尝试其中任何一种。

解决方案1：

$scope.$$postDigest(function(){
  initialize();
 });

解决方案2

$timeout(initialize)

Answer 3

我做这样的事情：

function waitForDiv() {
    var elem = document.getElementById('addressMap-' + $scope.mapId);
    if (typeof elem == 'undefined') {
        $timeout(waitForDiv, 100);
    }
}

function () {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: $scope.zoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    waitForDiv();
    map = new google.maps.Map(document.getElementById('addressMap-' + $scope.mapId), mapOptions);
};

Answer 4

在指令和角度中，一般来说，你需要在编译之前引用你的元素或任何东西，并避免在事后用id搜索DOM。

如果您创建了包含地图的元素，则可以避免等待摘要所需的$ timeout - 已经引用了该元素 _map 。

这是Plunker

var map_el = '<div id="map-{{mapId}}" class="map"></div>';

var _link = function(scope, el, attr, ctrl) {
   var _map = $compile(map_el)(scope);
   el.append(_map);
   ctrl.addMap(scope, _map);
};

var _controller = function() {
   var m = this;
   m.addMap = function(scope, _map) {
     ...
     new google.maps.Map(_map[0], mapOptions);
   }
}

在angularjs指令中获取Div id

4 个答案: