Javascript 使用角度重复的多张单张

我试图使不同的用户有不同的地图集的应用程序。为了做到这一点，我打算使用传单和AngularJS。该计划是，使用ng repeat，AngularJS将能够调用多个传单地图，每个用户都不同

这是我的html代码片段：

<div class="row" style="text-align:center"><!-- /.row -->
    <!-- /.map-col -->
    <div class="col-lg-6 col-md-12" ng-repeat="map in maps">
        <h2>Asu</h2>
        <div id="leaflets[{{$index}}]" style="height:300px"></div>
    </div>
</div><!-- /.row -->

华硕

javascript代码：

for ( var i = 0; i < $scope.maps.length; i++ ) { 
  try{
    $scope.leaflets[i] = L.map('leaflets[' + i + ']', {
      maxZoom: 4,
      minZoom: 1,
      crs: L.CRS.Simple
    }).setView([0, 0], 1);
    // dimensions of the image
    var w = 1080,
    h = 855,
    imageUrl = $scope.maps[i].url;
    var southWest = $scope.leaflets[i].unproject([0, h], $scope.leaflets[i].getMaxZoom()-1);
    var northEast = $scope.leaflets[i].unproject([w, 0], $scope.leaflets[i].getMaxZoom()-1);
    var bounds = new L.LatLngBounds(southWest, northEast);
    L.imageOverlay(imageUrl, bounds).addTo($scope.leaflets[i]);
    // tell leaflet that the map is exactly as big as the image
    $scope.leaflets[i].setMaxBounds(bounds);
    var dataPoints = $scope.maps[i].dataPoints;
    var heat = L.heatLayer(dataPoints, {
      radius: 40, maxZoom: 4
    }).addTo($scope.leaflets[i]);
  }
  catch(err) {

  }
}

for（var i=0；i<$scope.maps.length；i++）{
试一试{
$scope.传单[i]=L.map（'传单['+i+']'{
最大缩放：4，
minZoom:1，
crs:L.crs.Simple
}).setView（[0,0]，1）；
//图像的尺寸
var w=1080，
h=855，
imageUrl=$scope.maps[i].url；
var soutwest=$scope.pailates[i]。取消投影（[0，h]，$scope.pailates[i]。getMaxZoom（）-1）；
var northEast=$scope.slipals[i]。取消投影（[w，0]，$scope.slipals[i]。getMaxZoom（）-1）；
var bounds=新的L.LatLngBounds（西南、东北）；
L.imageOverlay（imageUrl，bounds）.addTo（$scope.传单[i]）；
//告诉传单，地图和图片一样大
$scope.传单[i].setMaxBounds（bounds）；
var dataPoints=$scope.maps[i].dataPoints；
var heat=L.heatLayer（数据点{
半径：40，最大缩放：4
}).addTo（$scope.传单[i]）；
}
捕捉（错误）{
}
}

当我尝试手动写入div id时，例如

<div class="col-lg-6 col-md-12" ng-repeat="map in maps">
    <h2>Asu</h2>
    <div id="leaflets[0]" style="height:300px"></div>
</div>
<div class="col-lg-6 col-md-12" ng-repeat="map in maps">
    <h2>Asu</h2>
    <div id="leaflets[1]" style="height:300px"></div>
</div>

华硕
华硕

它被完美地展示了。在这两种情况下，当我尝试在Chrome中“检查元素”时， 另外，使用ms javascript时出现的错误

---

有人有类似的问题或者有解决这个问题的想法吗？谢谢

问题在于javascript是在HTML仍在呈现时执行的。这导致javascript代码找不到具有相应id的

我在AngularJS中使用$timeout服务在HTML完成渲染后执行JS代码：

HTML仍然是一样的：

<div class="panel-body no-padding">
    <div class="row" style="text-align:center"><!-- /.row -->
    <!-- /.map-col -->
        <div class="col-lg-6 col-md-12" ng-repeat="map in maps">
            <h2>{{map.title}}</h2>
            <div id="leaflets[{{$index}}]" style="height:300px"></div>
        </div>
    </div><!-- /.row -->
</div><!-- /.panel-body -->

{{map.title}}

JS现在使用超时：

.controller('EngCtrl', function ($timeout, $scope, $location, $http, $templateCache, $filter) {

...
...

var initMap = function () {
  for ( var i = 0; i < $scope.maps.length; i++ ) { 
    try{
      $scope.leaflets[i] = L.map('leaflets[' + i + ']', {
        maxZoom: 4,
        minZoom: 1,
        crs: L.CRS.Simple
      }).setView([0, 0], 1);
      // dimensions of the image
      var w = 1080,
      h = 855,
      imageUrl = $scope.maps[i].url;
      var southWest = $scope.leaflets[i].unproject([0, h], $scope.leaflets[i].getMaxZoom()-1);
      var northEast = $scope.leaflets[i].unproject([w, 0], $scope.leaflets[i].getMaxZoom()-1);
      var bounds = new L.LatLngBounds(southWest, northEast);
      L.imageOverlay(imageUrl, bounds).addTo($scope.leaflets[i]);
      // tell leaflet that the map is exactly as big as the image
      $scope.leaflets[i].setMaxBounds(bounds);
      var dataPoints = $scope.maps[i].dataPoints;
      var heat = L.heatLayer(dataPoints, {
        radius: 40, maxZoom: 4
      }).addTo($scope.leaflets[i]);
    }
    catch(err) {
    }
  }
}

$timeout(initMap, 0);

.controller（'EngCtrl'，函数（$timeout、$scope、$location、$http、$templateCache、$filter）{
...
...
var initMap=函数（）{
对于（var i=0；i<$scope.maps.length；i++）{
试一试{
$scope.传单[i]=L.map（'传单['+i+']'{
最大缩放：4，
minZoom:1，
crs:L.crs.Simple
}).setView（[0,0]，1）；
//图像的尺寸
var w=1080，
h=855，
imageUrl=$scope.maps[i].url；
var soutwest=$scope.pailates[i]。取消投影（[0，h]，$scope.pailates[i]。getMaxZoom（）-1）；
var northEast=$scope.slipals[i]。取消投影（[w，0]，$scope.slipals[i]。getMaxZoom（）-1）；
var bounds=新的L.LatLngBounds（西南、东北）；
L.imageOverlay（imageUrl，bounds）.addTo（$scope.传单[i]）；
//告诉传单，地图和图片一样大
$scope.传单[i].setMaxBounds（bounds）；
var dataPoints=$scope.maps[i].dataPoints；
var heat=L.heatLayer（数据点{
半径：40，最大缩放：4
}).addTo（$scope.传单[i]）；
}
捕捉（错误）{
}
}
}
$timeout（initMap，0）；