Wie führe ich die AngularJS-Controller-Funktion beim Laden der Seite aus?

Derzeit habe ich eine Angular.js-Seite, auf der gesucht und Ergebnisse angezeigt werden können. Der Benutzer klickt auf ein Suchergebnis und dann auf die Schaltfläche Zurück. Ich möchte, dass die Suchergebnisse erneut angezeigt werden, kann jedoch nicht herausfinden, wie die Ausführung der Suche ausgelöst wird. Hier ist das Detail:

• Meine Angular.js-Seite ist eine Suchseite mit einem Suchfeld und einer Suchschaltfläche. Der Benutzer kann eine Abfrage manuell eingeben und eine Taste drücken. Die Ajax-Abfrage wird ausgelöst und die Ergebnisse werden angezeigt. Ich aktualisiere die URL mit dem Suchbegriff. Das alles funktioniert gut.
• Der Benutzer klickt auf ein Ergebnis der Suche und wird auf eine andere Seite weitergeleitet - das funktioniert auch gut.
• Der Benutzer klickt auf die Schaltfläche "Zurück" und kehrt zu meiner Winkelsuchseite zurück. Die richtige URL wird angezeigt, einschließlich des Suchbegriffs. Alles funktioniert gut.
• Ich habe den Suchfeldwert an den Suchbegriff in der URL gebunden, sodass er den erwarteten Suchbegriff enthält. Alles funktioniert gut.

Wie kann ich die Suchfunktion erneut ausführen, ohne dass der Benutzer die "Suchtaste" drücken muss? Wenn es jquery wäre, würde ich eine Funktion in der documentready-Funktion ausführen. Ich kann das Angular.js-Äquivalent nicht sehen.

Einerseits, wie @ Mark-Rajcok sagte, kann man einfach mit einer privaten inneren Funktion davonkommen:

// at the bottom of your controller
var init = function () {
   // check if there is query in url
   // and fire search in case its value is not empty
};
// and fire it after definition
init();

Sie können sich auch die ng-init- Direktive ansehen . Die Implementierung wird ähnlich sein wie:

// register controller in html
<div data-ng-controller="myCtrl" data-ng-init="init()"></div>

// in controller
$scope.init = function () {
    // check if there is query in url
    // and fire search in case its value is not empty
};

Aber seien Sie vorsichtig, da die eckige Dokumentation (seit Version 1.2) impliziert , dass Sie das NICHT verwenden sollten ng-init. Wie auch immer, es hängt von der Architektur Ihrer App ab.

Ich habe verwendet, ng-initals ich einen Wert vom Back-End an die Winkel-App übergeben wollte:

<div data-ng-controller="myCtrl" data-ng-init="init('%some_backend_value%')"></div>

Versuche dies?

$scope.$on('$viewContentLoaded', function() {
    //call it here
});

Ich konnte nie $viewContentLoadedfür mich arbeiten und ng-initsollte eigentlich nur in einem ng-repeat(laut Dokumentation) verwendet werden. Auch das Aufrufen einer Funktion direkt in einem Controller kann zu Fehlern führen, wenn der Code auf einem Element basiert, das noch nicht definiert wurde .

Das mache ich und es funktioniert für mich:

$scope.$on('$routeChangeSuccess', function () {
  // do something
});

Es sei denn, Sie verwenden ui-router. Dann ist es:

$scope.$on('$stateChangeSuccess', function () {
  // do something
});

angular.element(document).ready(function () {

    // your code here

});

Die Lösung von Dimitri / Mark hat bei mir nicht funktioniert, aber die Verwendung der $ timeout- Funktion scheint gut zu funktionieren, um sicherzustellen, dass Ihr Code erst ausgeführt wird, nachdem das Markup gerendert wurde.

# Your controller, including $timeout

var $scope.init = function(){
 //your code
}

$timeout($scope.init)

Ich hoffe es hilft.

Sie können dies tun, wenn Sie das viewContentLoaded-DOM-Objekt beobachten möchten, um es zu ändern, und dann etwas tun möchten. Die Verwendung von $ scope. $ on funktioniert ebenfalls, jedoch anders, insbesondere wenn Sie einen Seitenmodus für Ihr Routing haben.

 $scope.$watch('$viewContentLoaded', function(){
    // do something
 });

Sie können das $ window-Objekt von angle verwenden:

$window.onload = function(e) {
  //your magic here
}

Eine andere Alternative:

var myInit = function () {
    //...
};
angular.element(document).ready(myInit);

(über https://stackoverflow.com/a/30258904/148412 )

Eine weitere Alternative, wenn Sie einen Controller haben, der nur für diese Seite spezifisch ist:

(function(){
    //code to run
}());

Wenn Sie $ routeProvider verwenden, können Sie .state auflösen und Ihren Dienst booten. Dies bedeutet, dass Sie Controller und View erst laden, nachdem Sie Ihren Dienst aufgelöst haben:

UI-Routen

 .state('nn', {
        url: "/nn",
        templateUrl: "views/home/n.html",
        controller: 'nnCtrl',
        resolve: {
          initialised: function (ourBootstrapService, $q) {

            var deferred = $q.defer();

            ourBootstrapService.init().then(function(initialised) {
              deferred.resolve(initialised);
            });
            return deferred.promise;
          }
        }
      })

Bedienung

function ourBootstrapService() {

 function init(){ 
    // this is what we need
 }
}

Fand Dmitry Evseev Antwort sehr nützlich.

Fall 1: Verwenden von angleJs allein:
Um eine Methode beim Laden der Seite auszuführen, können Sie ng-initin der Ansicht die Methode init verwenden und deklarieren, obwohl die Verwendung einer schwereren Funktion gemäß den Angular Docs on ng-init nicht empfohlen wird :

Diese Anweisung kann missbraucht werden, um Ihren Vorlagen unnötig viel Logik hinzuzufügen. Es gibt nur wenige geeignete Anwendungen von ngInit, z. B. zum Aliasing spezieller Eigenschaften von ngRepeat, wie in der folgenden Demo dargestellt. und zum Einfügen von Daten über serverseitiges Scripting. Abgesehen von diesen wenigen Fällen sollten Sie Controller anstelle von ngInit verwenden, um Werte für einen Bereich zu initialisieren.

HTML:

<div ng-controller="searchController()">
    <!-- renaming view code here, including the search box and the buttons -->
</div>

Regler:

app.controller('SearchCtrl', function(){

    var doSearch = function(keyword){
        //Search code here
    }

    doSearch($routeParams.searchKeyword);
})

Warnung: Verwenden Sie diesen Controller nicht für eine andere Ansicht, die für eine andere Absicht bestimmt ist, da sonst die Suchmethode auch dort ausgeführt wird.

Fall 2: Verwenden von Ionic:
Der obige Code funktioniert. Stellen Sie einfach sicher, dass der Ansichtscache im route.jsas deaktiviert ist :

route.js

.state('app', {
    url           : '/search',
    cache         : false, //disable caching of the view here
    templateUrl   : 'templates/search.html'   ,
    controller    : 'SearchCtrl'
  })

Hoffe das hilft

Ich hatte das gleiche Problem und nur diese Lösung funktionierte für mich (sie führt eine Funktion aus, nachdem ein vollständiges DOM geladen wurde). Ich verwende dies zum Scrollen zum Ankern, nachdem die Seite geladen wurde:

angular.element(window.document.body).ready(function () {

                        // Your function that runs after all DOM is loaded

                    });

Sie können die Suchergebnisse in einem allgemeinen Dienst speichern, der von überall verwendet werden kann und beim Navigieren zu einer anderen Seite nicht gelöscht wird. Anschließend können Sie die Suchergebnisse mit den gespeicherten Daten für die Schaltfläche "Zurück" festlegen

function search(searchTerm) {
    // retrieve the data here;
    RetrievedData = CallService();
    CommonFunctionalityService.saveSerachResults(RetrievedData);
} 

Für deinen Backbutton

function Backbutton() {
    RetrievedData = CommonFunctionalityService.retrieveResults();
}

Rufen Sie die Anfangsmethoden innerhalb der Selbstinitialisierungsfunktion auf.

(function initController() {

    // do your initialize here

})();