Combattre AngularJS en exécutant deux fois le contrôleur

Question

Je comprends qu'AngularJS exécute certains codes deux fois, parfois même plus, par exemple $watch les événements, la vérification constante des états du modèle, etc.

Cependant mon code :

function MyController($scope, User, local) {

var $scope.User = local.get(); // Get locally save user data

User.get({ id: $scope.User._id.$oid }, function(user) {
  $scope.User = new User(user);
  local.save($scope.User);
});

//...

est exécuté deux fois, insérant 2 enregistrements dans ma base de données. Je suis manifestement encore en train d'apprendre, car cela fait des années que je me cogne la tête contre ce problème !

Answer 1

Le routeur d'applications a spécifié la navigation vers MyController así:

$routeProvider.when('/',
                   { templateUrl: 'pages/home.html',
                     controller: MyController });

Mais j'avais aussi ceci dans home.html :

<div data-ng-controller="MyController">

Cela a digéré le contrôleur deux fois. En retirant le data-ng-controller de l'HTML a résolu le problème. Alternativement, l'attribut controller: aurait pu être supprimée de la directive de routage.

Ce problème apparaît également lors de l'utilisation de la navigation par onglets. Par exemple, app.js pourrait contenir :

  .state('tab.reports', {
    url: '/reports',
    views: {
      'tab-reports': {
        templateUrl: 'templates/tab-reports.html',
        controller: 'ReportsCtrl'
      }
    }
  })

Le HTML de l'onglet Rapports correspondant pourrait ressembler :

<ion-view view-title="Reports">
  <ion-content ng-controller="ReportsCtrl">

Cela aura également pour conséquence de faire fonctionner le contrôleur deux fois.

Answer 2

Documentation sur AngularJS - ngController
Notez que vous pouvez également attacher des contrôleurs au DOM en le déclarant dans une définition de route via le service $route. Une erreur courante consiste à déclarer à nouveau le contrôleur en utilisant ng-controller dans le modèle lui-même. Le contrôleur est alors attaché et exécuté deux fois. deux fois.

Lorsque vous utilisez ngRoute avec l'option ng-view le contrôleur est attaché par défaut à cet élément dom (ou ui-view si vous utilisez ui-router). Vous n'aurez donc pas besoin de l'attacher à nouveau dans le modèle.

Answer 3

Je voudrais ajouter pour référence :

La double exécution du code du contrôleur peut également être causée par la référence au contrôleur dans une directive qui s'exécute également sur la page.

par exemple

return {

            restrict: 'A',
            controller: 'myController',
            link: function ($scope) { ....

Lorsque vous avez également ng-controller="myController" dans votre HTML

Answer 4

Si vous savez que votre contrôleur s'exécute involontairement plus d'une fois, essayez de rechercher dans vos fichiers le nom du contrôleur en question, par exemple : search : MonContrôleur dans tous les fichiers. Il est probable qu'il a été copié-collé dans un autre fichier html/js et que vous avez oublié de le modifier lorsque vous avez développé ou utilisé ces contrôleurs partiels. Source : J'ai fait cette erreur

Answer 5

De plus, ne faites pas l'erreur stupide d'inclure le script d'angular deux fois comme je l'ai fait. Exemple :

Mon modèle layout.jade

!!!
html.js.csstransforms3d(ng-app="myApp")
  head
  // more code
  script(src='js/lib/angular/angular.js')

Mon modèle index.jade

extends layout
block body
  // more code
  div.main-wrap(ng-view)
  script(src='js/lib/angular/angular.js')