javascript - 当数据通过 Angularjs 解析到达时如何触发渲染模板

Question

我可以像这样在 Controller 中调用第一次加载

function RankCtrl($scope, $route, $routeParams, Rank) {
   $scope.leagues = Rank.query($routeParams)
}

当路由改变时，我使用 resolve 从服务器加载数据。 (并且更改路由只是对服务器的 json 请求，因此页面中不会刷新任何内容。)

app.config(function($routeProvider, $locationProvider) {
  $routeProvider.when('/rank/:type/:top', {
    controller: "RankCtrl",
    resolve: {
      leagues: function($route, $q, Rank) {
        return Rank.query($route.current.params)
      }
    }
  })

  $locationProvider.html5Mode(true);
});

我可以看到数据已通过 chrome 开发工具从服务器正确检索。

但是数据去了哪里？我喜欢将该数据分配给 $scope.leagues，并希望根据新数据更新 View (模板)。

我还尝试使用 $scope.$on('$routeChangeSuccess') 事件，但全局触发所有路由更改不仅限于此 Controller 。

$scope.$on('$routeChangeSuccess', function(next, current) { 
  $scope.leagues = Rank.query($routeParams);
});

如有任何帮助，我们将不胜感激。

Answer 1

您需要使用解析属性的名称(leagues)注入(inject)RankCtrl；

function RankCtrl($scope, $route, $routeParams, leagues) {
   $scope.leagues = leagues;
}

更新:

根据 Angular 版本，您可能需要手动构造和解析 promise 对象:

/* ... */
resolve: {
  leagues: function($route, $q, Rank) {
    var deferred = $q.defer();
    return Rank.query($route.current.params, function(leagues){
      deferred.resolve(leagues);
    });
    return deferred.promise;
  }
}