javascript - tutorial - Evento ionicView.entered de marco iónico disparado dos veces

update ionic

Question

Estoy jugando con estos eventos iónicos que se disparan cada vez que las vistas se activan, y estoy usando la plantilla de menú lateral que puede volver a utilizar al crear el proyecto. Parece que si pongo un oyente para el evento $ ionicView.entrada en el AppCtrl (el utilizado por la plantilla del menú lateral, que pertenece a un estado abstracto en la configuración del ui-enrutador) se llama dos veces seguidas para cualquier de las subvistas (como, cuando se usa app.sotherview como un estado).

No sé si este es el comportamiento esperado porque, según la documentación, esperaría que solo se activara una sola vez, sin importar si cambio la subvista (la vista del contenido del menú).

Me gustaría saber si este es el comportamiento esperado y, de ser así, ¿cómo puedo hacer que un evento se active solo una vez cada vez que muestra la plantilla del menú lateral?

Esto es lo que he escrito:

Esto es del módulo de aplicación:

.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
  $stateProvider

  .state(''app'', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: ''AppCtrl''
  })

  .state(''app.overview'', {
    url: "/overview",
    views: {
      ''menuContent'': {
        templateUrl: "templates/overview.html",
        controller: ''OverviewCtrl''
      }
    }
  })

  .state(''login'', {
    url: "/login",
    templateUrl: "templates/identificationscreen.html",
    controller: "IdentificationCtrl"
  })

  .state(''app.agenda'', {
    url: "/agenda",
    views: {
      ''menuContent'': {
        templateUrl: "templates/agenda.html",
        controller: ''AgendaCtrl''
      }
    }
  });

  $httpProvider.interceptors.push(''credentialsInjector'');

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise(''/login''); 

Entonces el AppCtrl es esto:

angular.module(''dashboard.controllers.app'', [])
.controller(''AppCtrl'', function($scope, $ionicModal, $timeout, $ionicSideMenuDelegate, authService, $state) {
    $scope.logout = function() {
        authService.logout();
        $state.go(''login'');
    };

    $scope.$on(''$ionicView.enter'', function(){ //This is fired twice in a row
        console.log("App view (menu) entered.");
        console.log(arguments); 
    });

    $scope.$on(''$ionicView.leave'', function(){ //This just one when leaving, which happens when I logout
        console.log("App view (menu) leaved.");
        console.log(arguments);
    });
}); 

La plantilla de menú:

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content edge-drag-threshold="true">
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>
      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">APPoint!</h1>
    </ion-header-bar>
    <ion-content>
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/overview">
          Overview
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/agenda">
          Agenda
        </ion-item>
        <ion-item nav-clear menu-close ng-click="logout()">
          Logout
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

Answer 1

Pruebe $ionicView.afterEnter . Eso solo se dispara una vez para mí. URL

Answer 2

Puede desactivar globalmente el mecanismo de caché utilizado por iónico haciendo:

$ionicConfigProvider.views.maxCache(0);

Aunque no lo he intentado solo.

De lo contrario, la mejor manera que funcionó para mí fue hacer

$scope.$on("$ionicView.afterLeave", function () {
     $ionicHistory.clearCache();
}); 

Esto es para borrar el caché antes de salir de la vista para volver a ejecutar el controlador cada vez que vuelva a ingresar.

Answer 3

La mejor opción que encontré para simular el evento onEnter fue usar el controlador de vista:

$scope.$on(''$stateChangeSuccess'', function (event, toState, toParams, fromState, fromParams) {
if (toState.name == "stateName")
    doSomething();

}

Answer 4

Una solución simple es:

$scope.$on(''$ionicView.enter'', function(ev) {
    if(ev.targetScope !== $scope)
        return;
    // Your code which should only run once
});

Answer 5

Al principio utilicé la respuesta de Florian pero noté que en mi caso es solo un síntoma de un problema de raíz, porque esto no le sucede a todos los controladores, solo a este.

En mi caso, sucede porque estaba intentando migrar incrementalmente desde Ionic / AngularJS v1 a Ionic / AngularJS v2 .

He agregado controllerAs en mi plantilla:

<ion-view view-title="Avatar » Instruments" ng-controller="AvatarInstrumentsCtrl as vm">

pero olvidé eliminar la referencia del controlador en mi app.js :

  .state(''app.avatar-instruments'', {
      url: "/avatar/instruments",
      views: {
        ''menuContent'': {
          templateUrl: "templates/avatar/instruments.html",
          controller: ''AvatarInstrumentsCtrl''
        }
      }
    })

Entonces, en mi caso, la solución es:

  .state(''app.avatar-instruments'', {
      url: "/avatar/instruments",
      views: {
        ''menuContent'': {
          templateUrl: "templates/avatar/instruments.html"
        }
      }
    })