angularjs - vista - ng init

Ejecute una función de controlador cada vez que se abre/muestra una vista

Question

Estoy creando una aplicación con angular + iónico que utiliza un menú clásico de tres botones en la parte inferior con tres pestañas de iones. Cuando un usuario hace clic en una pestaña, esa plantilla se abre a través de ui-router.

Tengo estados como este:

$stateProvider
  .state(''other'', {
    url: "/other",
    abstract: true,
    templateUrl: "templates/other/other.html"
})

En la plantilla hago algo como:

<ion-nav-view name="other" ng-init="doSomething()"></ion-nav-view>

Soy consciente de que puedo escribir la función doSomething () en mi controlador y simplemente llamarla manualmente allí. Sin embargo, eso me da el mismo problema. Parece que no puedo entender cómo llamar a la función doSomething () más de una vez, cada vez que alguien abre esa vista.

En este momento, la función doSomething () se llama bien, pero solo la primera vez que el usuario abre esa vista / pestaña. Me gustaría llamar a una función (para actualizar la geolocalización) siempre que un usuario abra esa vista o pestaña.

¿Cuál sería una forma correcta de implementar eso?

Gracias por ayudar!

Answer 1

¿Por qué no deshabilita la vista de caché con cache-view = "false" ?

En su vista, agregue esto a la vista de navegación de iones de esa manera:

<ion-nav-view name="other" cache-view="false"></ion-nav-view>

O en su proveedor de estado:

$stateProvider.state(''other'', {
   cache: false,
   url : ''/other'',
   templateUrl : ''templates/other/other.html''
})

Cualquiera de los dos hará que se llame siempre a su controlador.

Answer 2

Esto es probablemente lo que estabas buscando:

Ionic almacena en caché sus vistas y, por lo tanto, sus controladores de forma predeterminada (máximo de 10) http://ionicframework.com/docs/api/directive/ionView/

Hay eventos a los que puede conectarse para permitir que su controlador haga ciertas cosas en función de esos eventos iónicos. vea aquí para ver un ejemplo: http://ionicframework.com/blog/navigating-the-changes/

Answer 3

Me enfrenté al mismo problema, y ​​aquí dejo la razón de este comportamiento para todos los demás con el mismo problema.

Ver LifeCycle

Para mejorar el rendimiento, hemos mejorado la capacidad de Ionic de almacenar en caché los elementos de vista y los datos del alcance. Una vez que se inicializa un controlador, puede persistir durante toda la vida de la aplicación; simplemente está oculto y eliminado del ciclo de vigilancia. Como no estamos reconstruyendo el alcance, hemos agregado eventos que debemos escuchar al ingresar nuevamente al ciclo de observación.

Para ver la descripción completa y los eventos $ ionicView, visite: http://ionicframework.com/blog/navigating-the-changes/

Answer 4

Por defecto, sus controladores eran caché y es por eso que su controlador solo disparó una vez. Para desactivar el almacenamiento en caché de un determinado controlador, debe modificar su estado .config(..).state Y establecer la opción de cache en false . p.ej :

  .state(''myApp'', {
    cache: false,
    url: "/form",
    views: {
      ''menuContent'': {
        templateUrl: "templates/form.html",
        controller: ''formCtrl''
      }
    }
  })

Para leer más, visite http://ionicframework.com/docs/api/directive/ionNavView/

Answer 5

Por ejemplo a @Michael Trouw,

dentro de su controlador ponga este código. esto se ejecutará cada vez que se ingrese o se active este estado, no necesita preocuparse por deshabilitar el caché y es un mejor enfoque.

.controller(''exampleCtrl'',function($scope){
$scope.$on(''$ionicView.enter'', function(){
        // Any thing you can think of
        alert("This function just ran away");   
    });
})

Puede tener más ejemplos de flexibilidad como $ ionicView.beforeEnter -> que se ejecuta antes de que se muestre una vista. Y hay algunos más.

Answer 6

Si ha asignado un determinado controlador a su vista, se invocará cada vez que se cargue su vista. En ese caso, puede ejecutar algún código en su controlador tan pronto como se invoque, por ejemplo de esta manera:

<ion-nav-view ng-controller="indexController" name="other" ng-init="doSomething()"></ion-nav-view>

Y en tu controlador:

app.controller(''indexController'', function($scope) {
    /*
        Write some code directly over here without any function,
        and it will be executed every time your view loads.
        Something like this:
    */
    $scope.xyz = 1;
});

Editar: puede intentar realizar un seguimiento de los cambios de estado y luego ejecutar algún código cuando se cambia la ruta y se visita una ruta determinada, por ejemplo:

$rootScope.$on(''$stateChangeSuccess'', 
function(event, toState, toParams, fromState, fromParams){ ... })

Puede encontrar más detalles aquí: Eventos de cambio de estado .

Answer 7

Siguiendo la respuesta y el enlace de AlexMart , algo como esto funciona:

.controller(''MyCtrl'', function($scope) {
  $scope.$on(''$ionicView.enter'', function() {
     // Code you want executed every time view is opened
     console.log(''Opened!'')
  })
})

Answer 8

Teniendo en cuenta la capacidad de Ionic para almacenar en caché los elementos de vista y los datos de alcance mencionados anteriormente, esta podría ser otra forma de hacerlo, si desea ejecutar el controlador cada vez que se carga la vista. Puede deshabilitar globalmente el mecanismo de almacenamiento en caché utilizado por iónico haciendo:

$ionicConfigProvider.views.maxCache(0);

De lo contrario, la forma en que lo hacía funcionar para mí era

$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 ingrese nuevamente.

Answer 9

Tuve un problema similar con iónico cuando estaba tratando de cargar la cámara nativa tan pronto como seleccioné la pestaña de la cámara. Resolví el problema configurando el controlador en el componente de vista de iones para la pestaña de la cámara (en tabs.html) y luego llamando al método $ scope que carga mi cámara (addImage).

En www / templates / tabs.html

  <ion-tab title="Camera" icon-off="ion-camera" icon-on="ion-camera" href="#/tab/chats" ng-controller="AddMediaCtrl" ng-click="addImage()">
    <ion-nav-view  name="tab-chats"></ion-nav-view>
  </ion-tab>

El método addImage, definido en AddMediaCtrl, carga la cámara nativa cada vez que el usuario hace clic en la pestaña "Cámara". No tuve que cambiar nada en el caché angular para que esto funcione. Espero que esto ayude.