Führen Sie eine Steuerungsfunktion aus, wenn eine Ansicht geöffnet / angezeigt wird

Ich baue eine App mit Angular + Ionic, die ein klassisches Drei-Tasten-Menü unten mit drei Ion-Tabs verwendet. Wenn ein Benutzer auf eine Registerkarte klickt, wird diese Vorlage über den UI-Router geöffnet.

Ich habe Zustände wie diesen:

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

In der Vorlage mache ich so etwas wie:

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

Mir ist bewusst, dass ich die Funktion doSomething () in meinen Controller schreiben und dort einfach manuell aufrufen kann. Das gibt mir aber das gleiche Problem. Ich kann nicht mehr als einmal herausfinden, wie man die Funktion doSomething () aufruft, wenn jemand diese Ansicht öffnet.

Im Moment wird die Funktion doSomething () problemlos aufgerufen, aber nur beim ersten Öffnen dieser Ansicht / Registerkarte durch den Benutzer. Ich möchte eine Funktion aufrufen (um die Geolokalisierung zu aktualisieren), wenn ein Benutzer diese Ansicht oder Registerkarte öffnet.

Was wäre ein korrekter Weg, um das umzusetzen?

Vielen Dank für Ihre Hilfe!

Wenn Sie Ihrer Ansicht einen bestimmten Controller zugewiesen haben, wird Ihr Controller jedes Mal aufgerufen, wenn Ihre Ansicht geladen wird. In diesem Fall können Sie Code in Ihrem Controller ausführen, sobald er aufgerufen wird, beispielsweise auf folgende Weise:

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

Und in Ihrem Controller:

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

Bearbeiten: Sie können versuchen, Statusänderungen zu verfolgen und dann Code auszuführen, wenn die Route geändert und eine bestimmte Route besucht wird. Beispiel:

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

Weitere Details finden Sie hier: Statusänderungsereignisse .

Standardmäßig waren Ihre Controller Cache und deshalb wurde Ihr Controller nur einmal ausgelöst. Um das Caching für einen bestimmten Controller zu deaktivieren, müssen Sie Ihren ändern .config(..).stateund die cacheOption auf setzen false. z.B :

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

Weitere Informationen finden Sie unter http://ionicframework.com/docs/api/directive/ionNavView/.

Verfolgen Sie die Antwort und den Link von AlexMart funktioniert so etwas:

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

Ich hatte das gleiche Problem, und hier überlasse ich den Grund für dieses Verhalten allen anderen mit dem gleichen Problem.

Lebenszyklus anzeigen

Um die Leistung zu verbessern, haben wir die Fähigkeit von Ionic verbessert, Ansichtselemente und Bereichsdaten zwischenzuspeichern. Sobald ein Controller initialisiert wurde, kann er während der gesamten Lebensdauer der App bestehen bleiben. Es ist nur versteckt und aus dem Uhrenzyklus entfernt. Da wir den Bereich nicht neu erstellen, haben wir Ereignisse hinzugefügt, auf die wir achten sollten, wenn Sie erneut in den Überwachungszyklus eintreten.

Eine vollständige Beschreibung und $ ionicView-Ereignisse finden Sie unter: http://ionicframework.com/blog/navigating-the-changes/

Warum deaktivieren Sie den Ansichtscache nicht mit cache-view = "false" ?

Fügen Sie in Ihrer Ansicht Folgendes zur Ion-Navi-Ansicht hinzu:

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

Oder in Ihrem StateProvider:

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

In beiden Fällen wird Ihr Controller immer aufgerufen.

Zum Beispiel an @Michael Trouw,

Geben Sie diesen Code in Ihren Controller ein. Dies wird jedes Mal ausgeführt, wenn dieser Status eingegeben oder aktiv ist. Sie müssen sich keine Gedanken über das Deaktivieren des Caches machen und es ist ein besserer Ansatz.

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

Sie können weitere Beispiele für Flexibilität wie $ ionicView.beforeEnter -> verwenden, die ausgeführt werden, bevor eine Ansicht angezeigt wird. Und da steckt noch mehr dahinter.

In Anbetracht der oben erwähnten Fähigkeit von Ionic, Ansichtselemente und Bereichsdaten zwischenzuspeichern, kann dies eine andere Möglichkeit sein, wenn Sie den Controller jedes Mal ausführen möchten, wenn die Ansicht geladen wird. Sie können den von ionic verwendeten Caching-Mechanismus global deaktivieren, indem Sie Folgendes tun:

$ionicConfigProvider.views.maxCache(0);

Sonst war es so, wie ich es für mich arbeiten ließ

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

Dies dient dazu, den Cache zu leeren, bevor Sie die Ansicht verlassen, um den Controller bei jeder erneuten Eingabe erneut auszuführen.

Dies ist wahrscheinlich das, wonach Sie gesucht haben:

Ionic speichert Ihre Ansichten und damit Ihre Controller standardmäßig zwischen (maximal 10) Http://ionicframework.com/docs/api/directive/ionView/

Es gibt Ereignisse, an die Sie sich anschließen können, damit Ihr Controller bestimmte Dinge basierend auf diesen ionischen Ereignissen ausführen kann. Ein Beispiel finden Sie hier: http://ionicframework.com/blog/navigating-the-changes/

Ich hatte ein ähnliches Problem mit ionic, bei dem ich versuchte, die native Kamera zu laden, sobald ich die Registerkarte Kamera auswählte. Ich habe das Problem behoben, indem ich den Controller auf die Ionenansichtskomponente für die Registerkarte "Kamera" (in tabs.html) eingestellt und dann die Methode "$ scope" aufgerufen habe, mit der meine Kamera geladen wird (addImage).

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

Die in AddMediaCtrl definierte addImage-Methode lädt die native Kamera jedes Mal, wenn der Benutzer auf die Registerkarte "Kamera" klickt. Ich habe nicht müssen für diese Arbeit etwas im Winkel Cache ändern. Ich hoffe das hilft.