整合 AngularJS + 传单

Question

我正在使用 AngularJS 和 Leaflet 构建一个网络应用程序。我试过 angular-leaflet-directive 但它使 webapp 太慢且无响应（我有 +2000 点和许多复杂的多边形）。

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

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

这是 Angular 应用程序：

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 的过滤器不会。我已经测试过用 <input type="number" ng-model="last_clicked"> 过滤 ng-repeat 并且它有效，但在点击 Leaflet 地图时仍然没有任何效果。有什么想法吗？

Answer 1

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

更新原问题中的代码：

...
    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 + 传单

Integrating AngularJS + Leaflet

javascript

angularjs

leaflet

geojson

angular-leaflet-directive