Атрибут AngularJS id в включенном шаблоне HTML

Question

В AngularJS атрибут id из моего шаблона HTML не распознается моим javascript.

Например:

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() функции директивы. Кроме того, похоже, что вы можете Map.render() использовать DOMElement вместо необходимости 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

класть карта код доступа в комплектеTimeout. Вы пытаетесь получить доступ к карте сразу. Угловое не выполняется с показом карты, поэтому решение 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);