AngularJs: controller is called twice by using $routeProvider

Question

Module routes:

var switchModule = angular.module('switchModule', []);

switchModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/build-content', {templateUrl: 'build-content.html', controller: BuildInfoController});
}]);

Controller:

function BuildInfoController($http, $scope){
    alert("hello");
}

Html:

<html ng-app="switchModule">
...
<body>
    <ul>
        <li><a href="#build-content"/></a></li>
    </ul>
    <div class="ng-view"></div>
</body>
...

Each time when i click the hyperlink '', the 'BuildInfoController' will be called twice. Am i missing something here?

Does build-content.html have `ng-controller="BuildInfoController"? If so, try removing that. — Mark Rajcok
– Mark Rajcok, Commented Jan 21, 2013 at 16:34
No such an ng-controller like you said. Anyway, thanks a lot. I've already fixed it by using camus's solution. — Howard
– Howard, Commented Jan 22, 2013 at 1:40
possible duplicate of Combating AngularJS executing controller twice — fracz
– fracz, Commented Apr 19, 2015 at 11:15
I'm having a similar issue, but in my case the controller is being fired only on page refresh. If I navigate to the page from a link the controller only fires once, as expected. However if I refresh the page, it fires twice. Any suggestions? — abyrne85
– abyrne85, Commented Jul 13, 2015 at 9:31

joelmdev · Accepted Answer · 2015-03-06 16:44:10Z

72

I had face same issue today. I had added controller name in my $routeProvider and also in my html.

$routeProvider
    .when('/login', {
            controller: 'LoginController',
            templateUrl: 'html/views/log-in.html'
     })

and in my view as

<div class="personalDetails" ng-controller="LoginController"> </div>

You can remove controller name either from your view or from your routeprovider.

edited Mar 6, 2015 at 16:44

joelmdev

11.9k11 gold badges68 silver badges91 bronze badges

answered Jul 1, 2014 at 21:51

dip

1,2612 gold badges18 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karaxuna · Accepted Answer · 2013-07-22 09:02:05Z

42

I had the same problem , and it seems there is a stupid bug with routing. There is some kind of redirection going on.

to fix it , i just added a slash in the href , like :

<li><a href="#/build-content/"></a></li>

I hope it will fix things for you too.

edited Jul 22, 2013 at 9:02

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

answered Jan 21, 2013 at 16:42

mpm

20.2k7 gold badges52 silver badges56 bronze badges

7 Comments

Howard Over a year ago

Thanks a lot. This weird problem almost killed me last night. ^_^

gregtzar Over a year ago

Nice one @mpm, you saved me a lot of time debugging

Eugene Fidelin Over a year ago

This solution stackoverflow.com/a/15535724/1387163 helps me to solve the same issue

fnagel Over a year ago

Thanks for the answer. I was about loosing hope. Is this a known bug? I have a bunch of similar controllers and calls and there is only one I need to add a slash at the end of the URL. Happens only when called via ng-href not when the route is called directly.

SuReSh Over a year ago

thats not solve my problem.. my app is start and controller hit two time i am not click on any link..

|

Dan · Accepted Answer · 2013-06-07 15:29:00Z

16

I've had a similar problem. I found adding a trailing slash in the route but not in the link worked as expected.

$routeProvider.
when('/build-content/',...);

With this markup

<li><a href="/build-content">Content</a></li>

And then AngularJS will correct the URL in the browser to what is defined in the $routeProvider.

Bizarrely the opposite seems to work too with a trailing slash in the link and not in the route. It seems as long as the trailing slashes don't match the resolves and controller won't be called twice!

answered Jun 7, 2013 at 15:29

Dan

1,5861 gold badge10 silver badges10 bronze badges

2 Comments

Arion Over a year ago

You just saved my weekend!

Scott Munro Over a year ago

Thanks heaps for this. We noticed exactly the same thing. We were careful to keep the routes and the hrefs consistent in terms of trailing slashes and could not get it to work. It was only once we followed your advice and made sure that they were different that it worked.

Josh Ribakoff · Accepted Answer · 2014-08-28 05:18:31Z

8

Mine was a case of having 2 ng-view directives. I tried to wrap it, but unintentionally duplicated it:

<div class="ng-view">
    <div ng-view></div>
</div>

Removed the wrapper, fixed it.

answered Aug 28, 2014 at 5:18

Josh Ribakoff

3,0983 gold badges31 silver badges26 bronze badges

2 Comments

Dominic Goulet Over a year ago

That happened to me before where I had two completely different app section in my index.html, one for my login/registration and another one for the app itself, both containing the ng-view.

Anita Over a year ago

@DominicGoulet I have two different ng-view in my index.html. so the controllers are being called twice.Is there any solution for that except removing ng-views. I don't want remove those 2 ng-views.

Abdulla Nilam · Accepted Answer · 2015-10-26 05:34:22Z

8

Remove the ng-controller directive from your template pages if exists .

edited Oct 26, 2015 at 5:34

Abdulla Nilam

39.5k18 gold badges85 silver badges113 bronze badges

answered Oct 25, 2015 at 10:22

Sarath

1261 silver badge7 bronze badges

2 Comments

Anil8753 Over a year ago

It works!. May I know the reason, why should we remove ng-controller

Anil8753 Over a year ago

Understood, already added in when('/trending/', { templateUrl: "./templates/trending.html", controller: 'TrendingController' }) , now it should not be in template

Valentyn Shybanov · Accepted Answer · 2014-03-27 22:57:14Z

2

I had same problem and found that if you bootstrapped you angular two time you can have same error.

In my case I had <body ng-app> but also angular.bootstrap(document,['app']) and that caused double initialization of controllers.

Hope this can save some time to someone.

answered Mar 27, 2014 at 22:57

Valentyn Shybanov

19.4k7 gold badges68 silver badges59 bronze badges

Comments

Chris Halcrow · Accepted Answer · 2017-09-15 06:23:04Z

1

A controller can be added to more than one element of the DOM, so this problem can occur if this has been done e.g. :

  <div id="myDiv1" ng-controller="myController" ....></div>
  ....
  <div id="myDiv2" ng-controller="myController" ....></div>

answered Sep 15, 2017 at 6:23

Chris Halcrow

32.5k19 gold badges202 silver badges234 bronze badges

Comments

Beny · Accepted Answer · 2017-07-05 09:31:38Z

I had declaration of SomeController for each view partial in a single state. That caused duplicate event firing.

 .state('chat', {
            url: '/',
            views: {
                'content@': {
                    templateUrl: 'views/chat_wv1.html',
                    controller: 'ChatController'
                },
                'form@': {
                    templateUrl: 'views/chat_wv_placeholder.html',
                    controller: 'ViewController'
                },
                'sidePanel@': {
                     templateUrl: 'views/sidePanel_wv.html'
                     /* removing this part solved my issue*/
                     /*controller: 'ChatController'*/
                }

            }
        })

Hope this helps some one else.

Sridhar Gudimela · Accepted Answer · 2017-07-06 22:47:57Z

0

I too had a similar problem with a customDirective and unitentionally duplicated my controller.

<html>
   <body ng-app="MyApp" ng-controller="MyDirectiveCtrl">
      <my-directive></my-directive>
   </body>
</html>

angular.directive('myDirectivie', [function() {
   return {
         restrict: 'E',
         controller: 'MyDirectiveCtrl',

         ...

   }
}]);

I resolved it by removing ng-controller tag at body level

answered Jul 6, 2017 at 22:47

Sridhar Gudimela

5848 silver badges16 bronze badges

Comments

Muhammad Bilal · Accepted Answer · 2017-07-20 14:19:22Z

0

its because you have multiple ui-view

answered Jul 20, 2017 at 14:19

Muhammad Bilal

3893 silver badges6 bronze badges

Collectives™ on Stack Overflow

AngularJs: controller is called twice by using $routeProvider

10 Answers 10

Comments

7 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

7 Comments

2 Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Linked

Related