$locationPath leads to Error: [$rootScope:inprog]

Question

I need to switch view in my angular js webapp.

In order to handle the routing, I am using the $stateProvider, as here:

.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'
            })
            ...

Inside my login controller, I am trying to switch the view (from Login to Home)

  .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);
                    });
                });
        }

But when I reach $location.path('/home'); I get this error:

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)

What am I doing wrong? How to get rid of it and finally switch view?

I read to use $apply from SO

PS: I am very new to angular

why you are using `$apply` you want to change the state you can inject `$state` and call `$state.go('home') — Abdelrahman M. Allam, Jan 08 '16 at 11:58
you don't have a `/home` route being shown in the code you posted. You have a `/` route that is the `home` *state*. You also haven't shown the `.otherwise()` clause, but at a guess, it probably directs back to the `/login` route, and since you don't have a `/home` route, you are stuck in an endless loop. — Claies, Jan 08 '16 at 11:59

score 1 · Accepted Answer · answered Jan 08 '16 at 11:59

The error you get is because of the $scope.$apply around the $location.path('/home') statement. Angular is already in a digest loop so triggering it again within that loop (by calling $apply) will give you this error. Removing the $scope.$apply will therefor probably fix your problem.

The reason the digest loop is already triggered is because you are probably using the $http service which uses a promise to return the value. Angular always triggers a digest when resolving this promise.

But aside from that you probaly want to use the $state service to move to another state instead of moving to another location using the $location service. $state.go('home') would probably be what you are looking for.

Abdelrahman M. Allam · Answer 2 · 2016-01-08T12:31:21.247

1

I think here is the problem $location.path('/home'); You don't have path /home you have state called home so you need to go $location.path('/'); or inject $state and use method $state.go('home'), also you do not need to wrap it inside $apply

edited Jan 08 '16 at 12:31

answered Jan 08 '16 at 11:59

Abdelrahman M. Allam

892
10
16

$locationPath leads to Error: [$rootScope:inprog]

2 Answers2