返回状态时,$scope 何时重新加载?

When returning to a state, when does $scope reload?

我在这个控制器的父状态中有一个 list 对象。每次我加载使用这个控制器的状态时,$scope.items 被清空并且控制器必须再次从父作用域加载数据。

ListCtrl对应list状态。父状态包含许多列表。

.controller('ListCtrl', ['$scope','$state','$timeout',
    function($scope, $state, $timeout) {
    console.log($scope.items); // undefined
    if(!$scope.items) { // always evaluates to true
        $timeout(function() {
            $scope.items = $scope.$parent.list.items;
        }, 500);
    } else { 
        console.log($scope.items); // never executes here
    }
}])

据我了解,AngularJS 默认情况下会缓存一些视图。这是否意味着缓存不适用于缓存视图中的范围变量?最重要的是,有没有办法缓存这个$scope.items,这样每次我return到这个状态,就没有这个超时延迟了?

作为AngularJS的初学者,我的理解是$scope.items只定义在当前控制器内部。如果您想在 html 内容中加载项目,只需在指定的 html 标签中使用的控制器下定义项目。

我编了一个toy example,

angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
  $scope.username = 'World';

}]);

这与 AngularJS Scope documentation 上的类似。

父控制器

 .controller('parentController', ['$scope','$state','$timeout','$rootScope'
        function($scope, $state, $timeout, $rootScope) {
        $rootScope.items=['item 1','item 2'];
    }])

另一个控制器

.controller('ListCtrl', ['$scope','$state','$timeout','$rootScope'
        function($scope, $state, $timeout,$rootScope) {
        console.log($rootScope.items); // Should give the result
        if(!$scope.items) { // always evaluates to true
            $timeout(function() {
                $scope.items = $scope.$parent.list.items;
            }, 500);
        } else { 
            console.log($scope.items); // never executes here
        }
    }])

不要忘记在顶部添加 $rootScope。

最终解决方案是检查 $rootScope.list.item 是否已加载,而不仅仅是 $scope.item.

if(!$rootScope.list) {
    $timeout(function() { 
        $scope.items = $rootScope.list.items; 
    }, 1000);
} else { 
    $scope.items = $rootScope.list.items; 
}