Come eseguire la funzione del controller AngularJS al caricamento della pagina?

Attualmente ho una pagina Angular.js che consente la ricerca e visualizza i risultati. L'utente fa clic su un risultato della ricerca, quindi fa clic sul pulsante Indietro. Voglio che i risultati della ricerca vengano nuovamente visualizzati, ma non riesco a capire come attivare la ricerca. Ecco il dettaglio:

• La mia pagina Angular.js è una pagina di ricerca, con un campo di ricerca e un pulsante di ricerca. L'utente può digitare manualmente una query e premere un pulsante e la query Ajax viene attivata e i risultati vengono visualizzati. Aggiornamento l'URL con il termine di ricerca. Funziona tutto bene.
• L'utente fa clic su un risultato della ricerca e viene indirizzato a una pagina diversa, che funziona anche bene.
• L'utente fa clic sul pulsante Indietro e torna alla mia pagina di ricerca angolare e viene visualizzato l'URL corretto, incluso il termine di ricerca. Tutto funziona bene.
• Ho associato il valore del campo di ricerca al termine di ricerca nell'URL, quindi contiene il termine di ricerca previsto. Tutto funziona bene.

Come posso eseguire nuovamente la funzione di ricerca senza che l'utente debba premere il "pulsante Cerca"? Se fosse jquery, esegui una funzione nella funzione già documentata. Non riesco a vedere l'equivalente di Angular.js.

Da un lato, come ha detto @ Mark-Rajcok, puoi semplicemente scappare con la funzione interiore privata:

// 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();

Inoltre puoi dare un'occhiata alla direttiva ng-init . L'implementazione sarà molto simile a:

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

Ma attenzione, poiché la documentazione angolare implica (dal v1.2) di NON utilizzare ng-initper quello. Tuttavia, dipende dall'architettura della tua app.

Ho usato ng-initquando volevo passare un valore dal back-end all'app angolare:

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

Prova questo?

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

Non potrei mai $viewContentLoadedlavorare per me, e ng-initdovrei davvero usarlo solo in un ng-repeat(secondo la documentazione) e anche chiamare una funzione direttamente in un controller può causare errori se il codice si basa su un elemento che non è stato ancora definito .

Questo è quello che faccio e funziona per me:

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

A meno che tu non stia usando ui-router. Quindi è:

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

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

    // your code here

});

La soluzione di Dimitri / Mark non ha funzionato per me, ma l'utilizzo della funzione $ timeout sembra funzionare bene per garantire che il codice venga eseguito solo dopo il rendering del markup.

# Your controller, including $timeout

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

$timeout($scope.init)

Spero che sia d'aiuto.

Puoi farlo se vuoi guardare l'oggetto DOM viewContentLoaded per cambiare e fare qualcosa. usando $ scope. $ on funziona anche ma in modo diverso soprattutto quando si dispone di una modalità di pagina sul routing.

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

È possibile utilizzare l'oggetto $ window di angular:

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

Un'altra alternativa:

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

(tramite https://stackoverflow.com/a/30258904/148412 )

Ancora un'altra alternativa se hai un controller specifico per quella pagina:

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

Quando usi $ routeProvider puoi risolvere su .state e avviare il tuo servizio. Questo per dire che caricherai Controller e View, solo dopo aver risolto il tuo servizio:

ui-routes

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

Servizio

function ourBootstrapService() {

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

Ho trovato la risposta di Dmitry Evseev abbastanza utile.

Caso 1: utilizzo di angularJs da solo:
per eseguire un metodo al caricamento della pagina, è possibile utilizzare ng-initnella vista e dichiarare il metodo init nel controller, avendo detto che l'uso di funzioni più pesanti non è raccomandato, come da Documenti angolari su ng-init :

È possibile abusare di questa direttiva per aggiungere quantità inutili di logica nei modelli. Vi sono solo pochi usi appropriati di ngInit, come ad esempio per l'alias delle proprietà speciali di ngRepeat, come mostrato nella demo seguente; e per l'iniezione di dati tramite scripting lato server. Oltre a questi pochi casi, è necessario utilizzare i controller anziché ngInit per inizializzare i valori su un ambito.

HTML:

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

controller:

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

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

    doSearch($routeParams.searchKeyword);
})

Avvertenza: non utilizzare questo controller per un'altra vista intesa per una diversa intenzione in quanto causerà l'esecuzione del metodo di ricerca anche lì.

Caso 2: utilizzo di Ionic:
il codice sopra funzionerà, assicurati solo che la cache della vista sia disabilitata nel modo seguente route.js:

route.js

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

Spero che sia di aiuto

Ho avuto lo stesso problema e solo questa soluzione ha funzionato per me (esegue una funzione dopo che è stato caricato un DOM completo). Lo uso per scorrere fino all'ancoraggio dopo che la pagina è stata caricata:

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

                        // Your function that runs after all DOM is loaded

                    });

È possibile salvare i risultati della ricerca in un servizio comune che può essere utilizzato da qualsiasi luogo e non si cancella quando si accede a un'altra pagina, quindi è possibile impostare i risultati della ricerca con i dati salvati per il clic del pulsante Indietro

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

Per il tuo backbutton

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

chiama i metodi iniziali all'interno della funzione di inizializzazione automatica.

(function initController() {

    // do your initialize here

})();