javascript - AngularJS 中的变量缓存(工厂)

Question

我的应用程序中有以下 Controller ，但有一些我无法解释的奇怪行为。我对其中两行进行了编号以帮助描述，它们不会同时存在于实时代码中。

var app = angular.module('movieListings', ['ngResource', 'ngRoute', 'ui.bootstrap', 'ng']);

var cachedMovieList = []; 

//Controller for movie list
app.controller('MovieListController', ['$http', function($http){
    var mlc = this; //needed for the $http request
    this.movies = cachedMovieList;    
    this.loaded = false;
    this.error = false;


    if(this.movies.length == 0) {            
        console.log("Grabbing new movie list from DB");
        $http.get('data/movies.json').success(function(data){
            mlc.movies = data; 
            mlc.loaded = true;
            cachedMovieList = data; //(1)
        }).error(function(data){
            mlc.error = true;
        });
        cachedMovieList = this.movies; //(2)
    } else {
        this.loaded = true;        
    }
}]);

使用上面的代码(第(1)行存在而第(2)行不存在)，我能够缓存结果，这样当我在页面之间滑动时，我不需要不断地重新获取数据。

但是，如果我删除第 (1) 行并插入第 (2) 行，则变量“cachedMovieList”永远不会被填充。我希望它是基于“mlc.movi​​es”被分配给...的事实，但我无法理解为什么会出现这种情况？

欢迎任何建议。

Answer 1

实现一个检索数据的工厂。当数据从 $http 调用返回时，使用 angular.copy 保留数组引用。

 var app = angular.module('movieListings', ['ngResource', 'ngRoute', 'ui.bootstrap', 'ng']);
 app.factory('movies', function($http) {
     var movies = {
         data: [],
         loaded: false,
         error: false
     };

     $http.get('data/movies.json').success(function(data){
        angular.copy(data, movies.data); 
           movies.loaded = true;
        }).error(function(data){
           movies.error = true;
        });
     return movies;

 });

将工厂注入(inject) Controller :

//Controller for movie list
app.controller('MovieListController', ['$scope','movies', function($scope, movies){
     this.movies = movies;
}]);

工厂(如服务)是单例的。它们初始化一次，并在 SPA 的整个生命周期内缓存。

在 View 中使用 Controller :

 <div ng-controller="MovieListController as ctrl">
       <div ng-show="!ctrl.movies.loaded"> Loading... </div>
       <ul>
            <li ng-repeat="movie in ctrl.movies.data">
                {{ movie.name }}
            </li>
       </ul>
 </div>