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, Jan 21 '13 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, Jan 22 '13 at 01:40
possible duplicate of [Combating AngularJS executing controller twice](http://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice) — fracz, Apr 19 '15 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, Jul 13 '15 at 09:31

score 72 · Answer 1 · edited Mar 06 '15 at 16:44

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 06 '15 at 16:44

joelmdev

9,449
8
57
82

answered Jul 01 '14 at 21:51

dip

1,221
1
17
32

Worked for me! Thank you. – Ahmed Azraq Apr 09 '16 at 01:51
This is exactly what was happening! Thank you! – madu May 28 '18 at 14:31

score 42 · Accepted Answer · edited Jul 22 '13 at 09:02

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 '13 at 09:02

karaxuna

25,822
11
76
111

answered Jan 21 '13 at 16:42

mpm

19,494
7
46
55

5

Thanks a lot. This weird problem almost killed me last night. ^_^ – Howard Jan 22 '13 at 01:37
Thanks so much. I would never think of that :D – karaxuna Jul 22 '13 at 09:02
Nice one @mpm, you saved me a lot of time debugging – gregtczap Sep 28 '13 at 04:04
3

This solution http://stackoverflow.com/a/15535724/1387163 helps me to solve the same issue – Eugene Fidelin Feb 14 '14 at 14:52
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. – fnagel Dec 18 '14 at 13:48
thats not solve my problem.. my app is start and controller hit two time i am not click on any link.. – SuReSh Dec 03 '15 at 14:10
had same problem and adding a slash at the end solved my problem too. I was using angular-route.js ver 1.2.25 – dvdmn Oct 16 '16 at 19:48
You can read why this is happening here https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes and about the urlmatcher here. https://ui-router.github.io/ng1/docs/0.3.1/index.html#/api/ui.router.util.type:UrlMatcher – Subhash Nov 17 '17 at 12:10

score 16 · Answer 3 · answered Jun 07 '13 at 15:29

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 07 '13 at 15:29

Dan

1,624
1
10
10

You just saved my weekend! – Arion Nov 16 '14 at 01:35
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. – Scott Munro May 19 '15 at 07:06

score 8 · Answer 4 · answered Aug 28 '14 at 05:18

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 '14 at 05:18

Josh Ribakoff

2,672
3
25
26

1

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. – Dominic Goulet Feb 26 '15 at 15:42
1

@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. – Anita Apr 03 '15 at 07:03

score 8 · Answer 5 · edited Oct 26 '15 at 05:34

8

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

edited Oct 26 '15 at 05:34

Abdulla Nilam

29,776
14
53
77

answered Oct 25 '15 at 10:22

Sarath

126
1
7

1

It works!. May I know the reason, why should we remove ng-controller – Anil8753 Jul 05 '16 at 05:01
Understood, already added in when('/trending/', { templateUrl: "./templates/trending.html", controller: 'TrendingController' }) , now it should not be in template – Anil8753 Jul 05 '16 at 05:02
Thanks you! I never thought that! – kuanyui Sep 16 '17 at 17:06

score 2 · Answer 6 · answered Mar 27 '14 at 22:57

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.

score 1 · Answer 7 · answered Sep 15 '17 at 06:23

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 '17 at 06:23

Chris Halcrow

21,541
11
115
145

score 0 · Answer 8 · answered Jul 05 '17 at 09:31

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.

score 0 · Answer 9 · answered Jul 06 '17 at 22:47

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

score 0 · Answer 10 · answered Jul 20 '17 at 14:19

0

its because you have multiple ui-view

answered Jul 20 '17 at 14:19

Muhammad Bilal

331
3
3

AngularJs: controller is called twice by using $routeProvider

10 Answers10

Linked