包含的HTML模板中的AngularJS id屬性

Question

在AngularJS中，我的HTML模板無法識別來自我的HTML模板的id屬性。

例如：

index.html文件：

<div ng-controller="SubwayMapController"> 
    <div subway-map></div> 
</div> 

scripts.js中的文件：

app.directive('subwayMap', function() { 
     return { 
      templateUrl: 'Views/subway-map.html' 
     }; 
    }); 

     map = new OpenLayers.Map("basicMap"); 
     var mapnik   = new OpenLayers.Layer.OSM(); 
     var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 
     var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection 
     var position  = new OpenLayers.LonLat(2.35,48.85).transform(fromProjection, toProjection); //Paris 
     var zoom   = 12; 

     map.addLayer(mapnik); 
     map.setCenter(position, zoom); 

地鐵-map.html文件：

<div id="basicMap"></div> 

當我打開索引頁面，我期待地圖從Openstreetmap顯示，但沒有任何反應。

Answer 1

嘗試在指令的link()函數中設置地圖。另外，它看起來像你可以使用DOMElement Map.render()而不需要一個ID。

app.directive('subwayMap', function() { 
     return { 
      templateUrl: 'Views/subway-map.html', 
      link: function(scope, element) { 
       var map   = new OpenLayers.Map(); 
       var mapnik   = new OpenLayers.Layer.OSM(); 
       var fromProjection = new OpenLayers.Projection("EPSG:4326"); 
       var toProjection = new OpenLayers.Projection("EPSG:900913"); 
       var position  = new OpenLayers.LonLat(2.35,48.85) 
             .transform(fromProjection, toProjection); 
       var zoom   = 12; 

       map.addLayer(mapnik); 
       map.setCenter(position, zoom); 
       map.render(element[0]); 
      } 
     }; 
    }); 

Answer 2

在setTimeout中放置地圖訪問碼。您正嘗試立即訪問地圖。角度還沒有完成地圖渲染，所以setTimeout是解決方案。

$timeout(function(){ 
     map = new OpenLayers.Map("basicMap"); 
      var mapnik   = new OpenLayers.Layer.OSM(); 
      var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984 
      var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection 
      var position  = new OpenLayers.LonLat(2.35,48.85).transform(fromProjection, toProjection); //Paris 
      var zoom   = 12; 

      map.addLayer(mapnik); 
      map.setCenter(position, zoom); 
    },10);