web-dev-qa-db-fra.com

AngularJs: le contrôleur est appelé deux fois à l’aide de $ routeProvider

Itinéraires du module:

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

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

Manette:

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>
...

Chaque fois que je clique sur l'hyperlien '', le 'BuildInfoController' sera appelé deux fois. Est-ce que j'ai râté quelque chose?

controllerangularjs
43
Howard

J'ai eu le même problème, et il semble qu'il y ait un bogue stupide avec le routage. Il y a une sorte de redirection en cours.

pour y remédier, je viens d'ajouter une barre oblique dans le href, comme:

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

J'espère que ça va arranger les choses pour vous aussi.

43
mpm

J'ai eu le même problème aujourd'hui. J'avais ajouté le nom du contrôleur dans mon $ routeProvider et aussi dans mon HTML.

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

et à mon avis comme

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

Vous pouvez supprimer le nom du contrôleur de votre vue ou de votre fournisseur d'itinéraire.

70
dip

J'ai eu un problème similaire. J'ai trouvé que l'ajout d'une barre oblique finale dans la route, mais pas dans le lien, fonctionnait comme prévu.

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

Avec ce balisage

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

Ensuite, AngularJS corrigera l’URL du navigateur en fonction de ce qui est défini dans $ routeProvider.

Bizarrement, le contraire semble fonctionner aussi avec une barre oblique dans le lien et non dans la route. Il semble que tant que les barres obliques de fin not correspondent aux résolutions et que le contrôleur ne sera pas appelé deux fois!

15
Dan

Le mien était un cas d'avoir des directives de 2 ng-view. J'ai essayé de l'envelopper, mais je l'ai dupliqué par inadvertance:

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

Suppression de l'emballage, correction du problème.

8
Josh Ribakoff

Supprimez la directive ng-controller de vos pages de modèle, le cas échéant.

8
Sarath

J'ai eu le même problème et a constaté que si vous vous amorcez angulaire deux fois, vous pouvez avoir la même erreur.

Dans mon cas, j'avais <body ng-app> mais aussi angular.bootstrap(document,['app']) et cela provoquait une double initialisation des contrôleurs.

J'espère que cela peut faire gagner du temps à quelqu'un.

1
Valentyn Shybanov

Moi aussi, j'ai eu un problème similaire avec un CustomDirective et dupliqué involontairement mon contrôleur.

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

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

         ...

   }
}]);

Je l'ai résolu en enlevant le tag ng-controller au niveau du corps

0
Sridhar Gudimela

sa parce que vous avez plusieurs ui-view

0
Muhammad Bilal

Un contrôleur peut être ajouté à plusieurs éléments du DOM. Ce problème peut donc se produire si cela a été fait, par exemple. :

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

J'avais une déclaration de SomeController pour chaque vue partielle dans un seul état . Cela provoquait le déclenchement d'événements en double.

 .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'*/
                }

            }
        })

J'espère que ceci aide quelqu'un d'autre.

0
Beny