javascript - 包含的 HTML 模板中的 AngularJS id 属性

Question

在 AngularJS 中，我的 JavaScript 无法识别我的 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 的 map ，但没有任何反应。

Answer 1

尝试在指令的 link() 函数中设置 map 。另外，看起来您可以使用 DOMElement 而不是 ID 来 Map.render()。

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