Controller called twice in AngularJS

Question

I am using angular-routing in my code , for which following is the code Snippet. Problem is that the main controller is being called twice. I have already taken care of not declaring it again in markup ( as advised everywhere). I suspect there's something wrong in my routing code.

    app.directive('routeLoadingIndicator', function ($rootScope,$timeout) {
return {
    restrict:'E',
    link:function(scope, elem, attrs){
        scope.isRouteLoading = false;

        $rootScope.$on('$routeChangeStart', function(){
            scope.isRouteLoading = true;
        });
        $rootScope.$on('$routeChangeSuccess', function(){
            $timeout(function(){
                scope.isRouteLoading = false;                    
            }, 10);
        });
    }
};
});

HTML :

     <route-loading-indicator >
        <div  class="spinner" ng-if='isRouteLoading'>
            <div class="rectLoader"></div>                
        </div>
    <div class="right_col"  ng-if='!isRouteLoading' style="padding-top: 60px;"   ng-view>   
    </div>  </route-loading-indicator>

Controller :

   app.controller('main',   function($scope,$routeParams,$rootScope){
    console.log("main Controller");
  });

Routing Code :

   app.config(function($routeProvider) {
$routeProvider
    .when("/", {
        templateUrl : "xyz.html",
        controller : "main"
    })
  });

Post a complete, minimal example reproducing the problem. Include all the necessary stuff, and exclude all the irrlevant stuff (like your routeLoadingIndicator). — JB Nizet, Jan 16 '17 at 07:59
The code is working fine. check this out https://jsfiddle.net/ebinmanuval/c8u34s37/ — Ebin Manuval, Jan 16 '17 at 08:06
did you check [this](http://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice) ? — Punit Gajjar, Jan 16 '17 at 08:06
@charlietfl, because I want to display the content conditional to the variable isRouteLoading — HyperVol, Jan 16 '17 at 18:18
@EbinManuval , Yes now that I see your fiddle , it works. But locally it does'nt. Not sure why , but anyway , it's resolved by ng-show directive. Thanks anyway ! — HyperVol, Jan 16 '17 at 18:18
Another simple way is `ng-class`. Need to realize that `ng-if` both removes the `ng-view` not enabling angular to populate it and also creates needless child scope — charlietfl, Jan 16 '17 at 18:21

score 2 · Accepted Answer · answered Jan 16 '17 at 08:01

2

Yes right because of

<div class="right_col"  ng-if='!isRouteLoading' style="padding-top: 60px;"   ng-view>

this code as on route change event of $routeChangeStart and $routeChangeSuccess you togging value Hence ng-if get called twice as well your

ng-view

Remove ng-if from ng-view directive can help you...

In my way::: you should go with show and hide directive.... Like this::

<div class="right_col"  ng-show='!isRouteLoading' style="padding-top: 60px;"   ng-view>

answered Jan 16 '17 at 08:01

Pankaj Badukale

1,991
2
18
32

For the sake of clarity, it works because using ng-show does not recreate the directive's elements, but hide/show them. When angular recreate the div element (using ng-if) your controller get called again. – Marcos Brigante Jun 26 '18 at 13:21

Controller called twice in AngularJS

1 Answers1