在angularjs指令中獲取Div ID

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

一般而言，在指令和angular中，您希望在編譯或任何內容之前引用元素，並避免在事后通過id在DOM中搜索它們。

如果創建將包含地圖的元素，則可以避免$ timeout，您需要等待摘要-通過已經引用了該元素_map即可 。

這是一個笨蛋

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);
   }
}