openlayers的angularjs指令模板綁定不起作用

Question

我的角度指令是關於openlayers地圖應用程序的。

<div ng-app="app">
    <map-container></map-container>
</div>

Angular 工作代碼在這里 ：

angular.module("app",[]);

angular.module("app").controller("MapContainerController", function ($scope) {
    $scope.map = new ol.Map({});
});

angular.module("app").directive("mapContainer", function ($timeout) {
    return {
        "transclude": true,
        "controller": "MapContainerController",
        "link": function (scope) {
            var map = scope.map;
            map.setTarget(scope.targetElement || "map");
            map.addLayer(new ol.layer.Tile({
                source: new ol.source.OSM()
            }));
            map.setView(new ol.View({
                zoom: 3,
                center: [0, 0]
            }));
        },
        "template": '<div id="map" class="map" ng-transclude></div>'
    }
});

但是我想使用范圍參數作為指令映射元素名稱，例如以下代碼： 演示版本在這里 。

<div ng-app="app">
    <map-container  target-element="map"></map-container>
</div>

但這是行不通的。

angular.module("app").directive("mapContainer", function ($timeout) {
    return {
        "transclude": true,
        "scope": {
            "targetElement": "@"
        },
        "controller": "MapContainerController",
        "link": function (scope) {
            var map = scope.map;
            map.setTarget(scope.targetElement || "map");
            map.addLayer(new ol.layer.Tile({
                source: new ol.source.OSM()
            }));
            map.setView(new ol.View({
                zoom: 3,
                center: [0, 0]
            }));
        },
        "template": '<div id="{{targetElement}}" class="map" ng-transclude></div>'
    }
});

一切看起來都不錯，但無法正常工作。 我不明白這個問題。

Answer 1

您只需要將指令代碼包裝在$ timeout中，以便在創建地圖之前以id顯示模板。

angular.module("app").directive("mapContainer", function ($timeout) {
    return {
        "transclude": true,
        "scope": {
            "targetElement": "@"
        },
        "controller": "MapContainerController",
        "link": function (scope) {
            var map = scope.map;

            $timeout(function() {
               map.setTarget(scope.targetElement || "map");
               map.addLayer(new ol.layer.Tile({
                   source: new ol.source.OSM()
               }));
               map.setView(new ol.View({
                  zoom: 3,
                  center: [0, 0]
               }));

            });
                    },
        "template": '<div id="{{targetElement}}" class="map" ng-transclude></div>'
    }
});