$locationPath 导致错误：[$rootScope:inprog]答案

【问题标题】：$locationPath leads to Error: [$rootScope:inprog]$locationPath 导致错误：[$rootScope:inprog]
【发布时间】：2016-04-13 02:33:18
【问题描述】：

我需要在我的 Angular js webapp 中切换视图。

为了处理路由，我使用了 $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('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)

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

我从SO读到使用$apply

PS：我对 Angular 很陌生

【问题讨论】：

为什么你使用$apply你想改变你可以注入$state的状态并调用`$state.go('home')
您发布的代码中没有显示/home 路由。您有一个/ 路由，即home 状态。您也没有显示.otherwise() 子句，但猜测它可能会指向/login 路由，并且由于您没有/home 路由，因此您陷入了无限循环。
你为什么不使用 $state.go('home') 而不是 $apply。

标签： javascript angularjs routes

【解决方案1】：

您得到的错误是由于$location.path('/home') 语句周围的$scope.$apply。 Angular 已经在一个摘要循环中，因此在该循环中再次触发它（通过调用$apply）会给你这个错误。因此，删除$scope.$apply 可能会解决您的问题。

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

但除此之外，您可能希望使用$state 服务移动到另一个状态，而不是使用$location 服务移动到另一个位置。 $state.go('home') 可能就是你要找的。p>

【讨论】：

【解决方案2】：

我认为这是问题$location.path('/home'); 你没有路径/home 你有状态叫home 所以你需要去$location.path('/');或注入$state并使用方法$state.go('home')，你也不需要将它包裹在$apply中

【讨论】：