angularjs - openlayers の angularjs マップ ディレクティブがスコープ値を取得しない

Question

openlayersマップ アプリケーションの角度マップ ディレクティブを作成したいと考えています。たとえば、これは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
                });
            }
        };
    }
})();

しかし、これは地図を表示しません。

Answer 1

値がスコープにバインドされていないか、マップがレンダリングされていないという問題ですか? プランカーで再現しようとしましたが、これは期待どおりに機能するようです。

HTML

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

指令

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