0

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

3
  • 1
    why you are using $apply you want to change the state you can inject $state and call `$state.go('home') Jan 8, 2016 at 11:58
  • 1
    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 8, 2016 at 11:59
  • Why don't you use $state.go('home') instead of $apply.
    – msapkal
    Jan 8, 2016 at 12:01

2 Answers 2

1

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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.