javascript - $locationPath 导致错误 : [$rootScope:inprog]

Question

我需要在我的 Angular JS Web 应用程序中切换 View 。

为了处理路由，我使用 $stateProvider，如下所示:

.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function ($httpProvider, $stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('common', {
                templateUrl: 'assets/html/template.html',
                abstract: true,
            })
            .state('login', {
                url: '/login',
                parent: 'common',
                templateUrl: 'app/models/authentication/views/login.html',
                controller: 'LoginController'
            })
            .state('home', {
                url: '/',
                parent: 'common',
                templateUrl: 'app/models/home/views/home.html',
                controller: 'HomeController'
            })
            ...

在我的登录 Controller 中，我正在尝试切换 View (从登录到主页)

  .controller('LoginController', ['$scope', '$rootScope', '$cookieStore', '$location', '$window', '$http',
function ($scope, $rootScope, $cookieStore, $location, $window, $http) {

        $scope.login = function () {

            loadHttp();
        };

        function loadHttp() {
            var url = "http://myurl";
             ...
                .then(function (response) {
                    $scope.$apply(function () {

                        $location.path('/home');
                        console.log("$location.path: " + $location.path);
                    });
                });
        }

但是当我到达 $location.path('/home'); 时，我收到此错误:

Error: [$rootScope:inprog] http://errors.angularjs.org/1.4.8/$rootScope/inprog?p0=%24digest
    at Error (native)
    at http://localhost:3000/adminTool/assets/js/angular.min.js:6:416
    at t (http://localhost:3000/adminTool/assets/js/angular.min.js:126:132)
    at r.$apply (http://localhost:3000/adminTool/assets/js/angular.min.js:133:515)
    at http://localhost:3000/adminTool/app/models/authentication/controllers.js:46:32
    at http://localhost:3000/adminTool/assets/js/angular.min.js:119:129
    at r.$eval (http://localhost:3000/adminTool/assets/js/angular.min.js:133:313)
    at r.$digest (http://localhost:3000/adminTool/assets/js/angular.min.js:130:412)
    at r.$apply (http://localhost:3000/adminTool/assets/js/angular.min.js:134:78)
    at g (http://localhost:3000/adminTool/assets/js/angular.min.js:87:444)

我做错了什么？如何摆脱它并最终切换 View ？

我读到使用 SO 中的 $apply

PS:我对 Angular 很陌生

Answer 1

您收到的错误是由于 $location.path('/home') 语句周围的 $scope.$apply 造成的。 Angular 已经处于摘要循环中，因此在该循环中再次触发它(通过调用 $apply)将会出现此错误。删除 $scope.$apply 可能会解决您的问题。

摘要循环已被触发的原因是您可能正在使用 $http 服务，该服务使用 promise 返回值。在解决这个 promise 时，Angular 总是会触发摘要。

但除此之外，您可能希望使用 $state 服务移动到另一个州，而不是使用 $location 服务移动到另一个位置。 $state.go('home') 可能就是您正在寻找的内容。