anglejs openlayersの指示テンプレートバインドが機能しません

Question

私の角度指示は、openlayersマップアプリケーションに関するものです。角度Working code is here

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

は：demo version is here：

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