Question

我从服务更新了我的数组但是视图没有更新。

当我致电$scope.$apply()或$scope.$digest时，会记录

$ digest已在进行中

这是我的main.html文件。 ctrl.flightsTo是我提到的数组

<md-progress-linear class="md-accent" ng-hide="ctrl.isFlightDataLoaded" mode="indeterminate"></md-progress-linear>
<div class="md-padding">
  <md-autocomplete
      ng-show="ctrl.isFlightDataLoaded"
      md-selected-item="ctrl.selectedItem"
      md-selected-item-change="ctrl.selectedItemChange(item)"
      md-search-text="ctrl.searchText"
      md-items="item in ctrl.querySearch(searchText)"
      md-item-text="item.name"
      md-min-length="0"
      placeholder="Choose a destination">
    <md-item-template>
      <span md-highlight-text="ctrl.searchText">{{item.name}} - {{item.iata}}</span>
    </md-item-template>
  </md-autocomplete>
  <ul>
    <li ng-repeat="flight in ctrl.flightsTo">{{flight}}</li>
  </ul>
</div>

这是我的MainCtrl。

当md-selected-item-change事件被调用时，我会从flightDataService函数中的selectedItemChange获取我的航班数据。

但Angular不会更新视图。

.controller('MainCtrl', function(flightDataService) {
    var self = this;
    self.isFlightDataLoaded = false;
    self.destinations = [];
    self.querySearch = querySearch;
    self.flightsTo = [];
    self.selectedItemChange = selectedItemChange;
    self.init = init;

    function querySearch(query) {
      var results = query ? self.destinations.filter(createFilterFor(query)) : self.destinations;
      return results;
    };

    function createFilterFor(query) {
      var lowercaseQuery = angular.lowercase(query);

      return function filterFn(destination) {
        return angular.lowercase(destination.iata).indexOf(lowercaseQuery) === 0;
      }
    };

    function selectedItemChange(item) {
      if (typeof item !== 'undefined') {
        self.flightsTo = flightDataService.getFlightsTo(item.iata);
      }
    };

    function init() {
      flightDataService.loadAll().then(function() {
        self.destinations = flightDataService.getAirports();
        self.isFlightDataLoaded = true;
      }).catch(function(error) {
        console.log(error);
      });
    };

    self.init();
  });

最后，我附上了我的flightDataService。

它只返回已保存的数据。

.factory('flightDataService', function($http, $q, papa) {
    var FLIGHT_DATA_URL = 'https://s3-ap-southeast-2.amazonaws.com/glow-dev-assets/flight-data-gz.csv';

    var self = this;
    self.flights = [];
    self.airports = [];
    self.routes = [];
    self.loadAll = loadAll;
    self.getAirports = getAirports;
    self.getFlightsTo = getFlightsTo;

    function loadAll() {
      var deferred = $q.defer();

      loadAirportData().then(function(airports) {
        loadFlightData().then(function(flights) {
          processFlightData(flights, airports);
          deferred.resolve();
        }).catch(function(error) {
          deferred.reject(error);
        });
      }).catch(function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    };

    function loadAirportData() {
      var deferred = $q.defer();
      $http({
        method: 'GET',
        url: '/assets/airports.json'
      }).then(function(response) {
        deferred.resolve(response.data);
      }, function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    };

    function loadFlightData() {
      var deferred = $q.defer();
      $http({
        method: 'GET',
        url: FLIGHT_DATA_URL
      }).then(function(response) {
        deferred.resolve(response.data);
      }, function(error) {
        deferred.reject(error);
      });
      return deferred.promise;
    };

    function processFlightData(data, airports) {
      self.flights = papa.parse(data, { header: true }).data;

      var dests = self.flights.map(function(flight) { return flight.destination });
      var destSet = new Set(dests);
      destSet.forEach(function(dest) {
        var airport = airports.find(function(airport) {
          return airport.iata === dest
        });

        if (typeof airport !== 'undefined') {
          self.airports.push(airport);
        }
      });

      self.flights.forEach(function(flight) {
        var origin = flight.origin;
        var dest = flight.destination;

        if (typeof self.routes[dest] === 'undefined') {
          self.routes[dest] = [];
        }
        if (typeof self.routes[dest][origin] === 'undefined') {
          self.routes[dest][origin] = {
            date: flight.date,
            delay: flight.delay,
            distance: flight.distance
          };
        }
      });

      return self.flights;
    };

    function getAirports() {
      return self.airports;
    };

    function getFlightsTo(destination) {
      return self.routes[destination];
    };

    return self;
  });

当我在控制台上记录ctrl.flightsTo时。

它总是变好。

但是视图与空数组保持相同的状态。

Answer 1

最后，我找到了！

因为我的flightsTo变量是关联数组，所以Angular不会更新它。

所以我将其改为普通数组。

此外，IAmDranged的意见也是正确的。

谢谢大家！

Answer 2

我最初删除了这条评论，因为我暂时没有完成角度，并且对控制语法语法感到困惑，但实际上它在某些方面仍然可能是有用的。

ngRepeat 使用 $ watchCollection 来检测数组中的更改 - 跟踪数组中各个值的更改。这是Angular文档所说的。

试着进一步看，它实际上听起来像 $ watchCollection可以在数组的副本上工作 - 实际上只是数组引用的副本 - 首先是初始化通过申请。

在您的情况下，您将分配给您的数组 - 因此每次更新时都会更改它指向的引用。但$ watchCollection仍然只监视它保持引用的原始数组中的值更改。

您可能需要设置额外的监视以查找对阵列的参考更改。

这是一个评论，而不是一个实际的答案，但这个评论部分的时间太长了。希望这有用。

Answer 3

当我发现自己处于类似情况时，这不是一个很有用的答案：注入$ timeout并使用它在$ http调用的上下文之外进行最终更新：< / p>

$timeout(function () {
    processFlightData(flights, airports);
    deferred.resolve();
}

显然，这并没有解决问题或解释它为什么会发生，但如果你只是需要让你的应用运行起来，它可能是一个实用的解决方法。

Answer 4

试试这个：当你使用一个简单的javascript函数时，angular不会将更改应用于此函数内的变量。

function selectedItemChange(item) {
  if (typeof item !== 'undefined') {
    $scope.flightsTo = flightDataService.getFlightsTo(item.iata);
    $scope.$$phase || $scope.$apply();
  }
};

或者您也可以通过将函数放在$ scope varianles（如

）中来使用函数表达式

 $scope.functionName = function () {}

更改数组时，Angular不会更新视图

4 个答案: