AngularJs: controller is called twice by using $routeProvider

Question

Module routes:

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

switchModule.config([\'$routeProvider\', function($routeProvider) {
    $routeProvid         


        

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

its because you have multiple ui-view

Answer 5

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.

Answer 6

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>