Pregunta Lucha contra el controlador de ejecución AngularJS dos veces


Entiendo que AngularJS corre a través de un código dos veces, a veces incluso más, como $watch eventos, verificando constantemente los estados del modelo, etc.

Sin embargo mi código:

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);
});

//...

Se ejecuta dos veces, insertando 2 registros en mi base de datos. ¡Claramente sigo aprendiendo ya que he estado golpeando mi cabeza contra esto por años!


514
2018-03-20 21:43


origen


Respuestas:


El enrutador de la aplicación especificó la navegación a MyController al igual que:

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

Pero también tuve esto en home.html:

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

Esto digirió el controlador dos veces. La eliminación de la data-ng-controller atributo del HTML resolvió el problema. Alternativamente, el controller: propiedad podría haberse eliminado de la directiva de enrutamiento.

Este problema también aparece cuando se usa navegación con pestañas. Por ejemplo, app.js podría contener:

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

La pestaña de informes correspondiente HTML podría parecerse a:

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

Esto también dará como resultado ejecutar el controlador dos veces.


1021
2018-03-20 22:08



AngularJS docs - ngController
  Tenga en cuenta que también puede adjuntar controladores al DOM al declararlo   en una definición de ruta a través del servicio $ route. Un error común es   declarar el controlador nuevamente usando ng-controller en la plantilla   sí mismo. Esto hará que el controlador se adjunte y ejecute   dos veces.

Cuando usa ngRoute con el ng-view directiva, el controlador se adjunta a ese elemento dom por defecto (o ui-view si usa ui-router). Por lo tanto, no será necesario volver a adjuntarlo en la plantilla.


123
2017-10-02 08:46



Acabo de pasar por esto, pero el problema era diferente de la respuesta aceptada. Realmente estoy dejando esto aquí para mi yo futuro, para incluir los pasos que pasé para solucionarlo.

  1. Eliminar declaraciones de controlador redundantes
  2. Verificar barras inclinadas en las rutas
  3. Comprobar ng-ifs
  4. Verifique si hay alguna envoltura innecesaria ng-view llamadas (accidentalmente me había quedado en una ng-view eso fue envolviendo mi real ng-view. Esto resultó en tres llamadas a mis controladores).
  5. Si está en Rails, debe eliminar el turbolinks joya de tu application.js archivo. Perdí todo un día para descubrir eso. Respuesta encontrada aquí.
  6. Inicializando la aplicación dos veces con ng-app y con bootstrap. Lucha contra el controlador de ejecución AngularJS dos veces
  7. Cuando se usa $ compile en un elemento completo en la función 'enlace' de la directiva que también tiene su propio controlador definido y usa devoluciones de llamada de este controlador en la plantilla a través de ng-clic, etc. Encontrado respuesta aquí.

62
2018-03-24 18:52



Solo quiero agregar un caso más cuando el controlador puede iniciar dos veces (esto es real para angular.js 1.3.1):

<div ng-if="loading">Loading...</div>
<div ng-if="!loading">
    <div ng-view></div>
</div>

En este caso $ route.current ya estará configurado cuando ng-view inicie. Eso causa inicialización doble.

Para solucionarlo, simplemente cambie ng-if a ng-show / ng-hide y todo funcionará bien.


12
2017-11-17 11:08



Me gustaría agregar como referencia:

La ejecución del código del controlador doble también puede ser causada al hacer referencia al controlador en una directiva que también se ejecuta en la página.

p.ej.

return {

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

Cuando también tienes ng-controller = "myController" en tu HTML


7
2017-10-28 18:19



Cuando usas angular-ui-enrutador con Angular 1.3+, había un problema sobre Representación de vistas dos veces en la transición de ruta. Esto dio como resultado la ejecución de controladores dos veces también. Ninguna de las soluciones propuestas funcionó para mí.

Sin embargo, actualizando angular-ui-router de 0.2.11 a 0.2.13 problema resuelto para mí.


7
2018-04-19 11:25



Rompí mi aplicación y todas sus dependencias en pedazos sobre este tema (detalles aquí: La aplicación AngularJS inicia dos veces (intentó las soluciones habituales ...))

Y al final, todo fue culpa del complemento Batarang Chrome.

Resolución en esta respuesta:

Recomiendo encarecidamente que lo primero en la lista de cualquier persona es deshabilitarla por correo antes de alterar el código.


6
2018-05-07 08:56



Tuve el mismo problema, en una aplicación simple (sin enrutamiento y una simple referencia de controlador ng) y el constructor de mi controlador se ejecutó dos veces. Finalmente, descubrí que mi problema era la siguiente declaración de autoarranque de mi aplicación AngularJS en mi vista Razor

<html ng-app="mTest1">

También lo he arrancado manualmente usando angular.bootstrap, es decir

angular.bootstrap(document, [this.app.name]);

así que quitar uno de ellos, funcionó para mí.


5
2018-01-27 14:33