angularjs openlayers 的 map 指令未获取范围值

Question

我想为 openlayers map application. For example this is an example of map 创建一个 angular 映射指令。

我创建了一个 angularjs 指令。

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div id='map' style='width: 400px; height: 300px'></div>",            
            "link": function (scope) {              

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: "map"
                });
            }
        };
    }
})();

这个示例工作正常。但我对地图元素 ID 名称进行了硬编码。我想从范围中获取 id 值。

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div id='{{target}}' style='width: 400px; height: 300px'></div>",
            "scope": {
                "target": "@"
            },
            "link": function (scope) {

                var target = scope.target ? scope.target: "map";

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: target
                });
            }
        };
    }
})();

但这不显示地图。

Answer 1

是值没有绑定scope还是地图没有渲染的问题？我试图在 plunker 中重现，但这似乎按预期工作。

HTML

<map target="{{id}}"></map>

指令

 template: '<div id="{{target}}" style="width: 400px; height: 300px">{{target}}</div>',
 scope: {
    "target": "@"
 },
 link: function (scope) {
 }

Answer 2

Openlayers 地图目标属性 accepts 3 types: 元素 |字符串 |未定义。

您可以将目标设置为元素[0]

但是你设置了指令参数replace:true，所以地图随指令而变化。

(function () {
    "use strict";

    angular.module("my.map").directive("map", [mapDirective]);

    function mapDirective() {
        return {
            "template": "<div style='width: 400px; height: 300px'></div>",
            "replace": true,
            "scope": {

            },
            "link": function (scope) {

                var target = scope.target ? scope.target: "map";

                var map = new ol.Map({
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 1
                    }),
                    layers: [
                        new ol.layer.Tile({
                            source: new ol.source.OSM()
                        })
                    ],
                    target: element[0]
                });
            }
        };
    }
})();

angularjs openlayers 的 map 指令未获取范围值

angularjs map directive for openlayers does not get scope value

angularjs

openlayers-3

angular-openlayers