Question

我正在使用AngularJS和Leaflet构建一个webapp。我已经尝试了angular-leaflet-directive但是它使得webapp太慢而且没有响应（我有+2000点和许多复杂的多边形）。

我使用$ http.get将多边形的GeoJSON加载到Leaflet中，并将相同的数据绑定到Angular中。 GeoJSON功能的属性填充表，我按照多边形ID（也是feature.property）过滤表，如下所示：

<div ng-repeat="bcd in nycd.features | filter: {properties.borocd: last_clicked} ">
    <div>{{ bcd.properties.borocd }}</div>
</div>

这是Angular app：

var mapApp = {}; //container for the leaflet layers

var app = angular.module('app', []);
app.controller('mainController', function($scope, $http) {

  $http.get('linkToData.json')
  .success(function(data) {
    $scope.last_clicked = 101; //default ID to begin

    $scope.nycd = data;
    mapApp.nycd = L.geoJson($scope.nycd, {
      onEachFeature: function (feature, layer) {
        layer.on('click', function(e) {
          $scope.last_clicked = feature.properties.borocd; //change ID with map click
        });
      },
      style: style
    });
    mapApp.nycd.addTo(map);
  })
  .error(function(data) {
    console.log('Error: ' + data);
  });
});

但是，当我点击地图时，我的$scope.last_clicked变量会更新，但ng-repeat的过滤器不会更新。我已经测试了使用ng-repeat过滤<input type="number" ng-model="last_clicked">并且它可以正常工作，但在点击传单地图时仍然没有。有什么想法吗？

Answer 1

解决方案是使用$scope.$apply()，正如charlietfl在评论中指出的那样。

更新原始问题中的代码：

...
    mapApp.nycd = L.geoJson($scope.nycd, {
      onEachFeature: function (feature, layer) {
        layer.on('click', function(e) {
          $scope.last_clicked = feature.properties.borocd; //change ID with map click
          $scope.$apply(); //this updates the filter
        });
...

我不确定我是否完全理解为什么它之前没有自动更新，但也许article可以提供帮助。

集成AngularJS + Leaflet

1 个答案: