openlayers的angularjs map指令没有获得范围值答案

【问题标题】：angularjs map directive for openlayers does not get scope valueopenlayers的angularjs map指令没有获得范围值
【发布时间】：2016-12-11 14:32:20
【问题描述】：

我想为openlayers 地图应用程序创建一个角度地图指令。例如，这是一个example of map。

我创建了一个 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
                });
            }
        };
    }
})();

但这并没有显示地图。

【问题讨论】：

标签： angularjs openlayers-3 angular-openlayers

【解决方案1】：

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

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

但是你设置了指令参数replace:true，所以map会随着指令而改变。

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

【讨论】：

【解决方案2】：

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

HTML

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

指令

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

【讨论】：