Cum pentru a executa AngularJS controller funcția pe pagina de încărcare?

În prezent am o Angular.js pagina care permite căutarea și afișează rezultatele. Utilizatorul face clic pe un rezultat de căutare, apoi face clic pe butonul înapoi. Vreau rezultatele de căutare pentru a fi afișate din nou, dar nu pot't lucra în modul de a declanșa căutare pentru a executa. Aici's detalii:

  • Mi Angular.js pagina este o pagina de căutare, cu un câmp de căutare și de căutare buton. Utilizatorul poate introduce manual într-o interogare și apăsați un buton și și ajax interogare este concediat, iar rezultatele sunt afișate. Am actualizați URL-ul cu termenul de căutare. Că toate funcționează bine.
  • Utilizatorul face clic pe un rezultat de căutare și este luat de la o altă pagină - care funcționează prea bine.
  • Utilizatorul face clic pe butonul înapoi, și se duce înapoi la mea unghiulară pagina de căutare, și URL-ul corect este afișat, inclusiv termenul de căutare. Toate funcționează bine.
  • Am legat câmpul de căutare valoare termen de căutare în URL-ul, astfel încât acesta conține așteptat termen de căutare. Toate funcționează bine.

Cum pot obține funcția de căutare pentru a executa din nou fără ca utilizatorul să trebuiască să apăsați "butonul de căutare"? Dacă ar fi fost jquery, atunci mi-ar executa o funcție în documentready funcție. Pot't vedea Angular.js echivalent.

Comentarii la întrebare (1)
Soluția

Pe de o parte ca @Mark-Rajcok spus că poate scăpa interioară privată funcția:

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

De asemenea, puteți lua o privire la ng-init directiva. Punerea în aplicare va fi mult, cum ar fi:

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

Dar ai grija si de el unghiulare documentarea presupune (de la v1.2) de a NU folosi ng-init pentru asta. Cu toate acestea omi depinde de arhitectură de aplicație.

Am folosit ng-init când am vrut să treacă o valoare din back-end în app unghiulară:

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

Încercați acest lucru?

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

N-am putut să $viewContentLoaded să lucrezi pentru mine, șing-initar trebui să fie utilizate numai într-unng-repeat` (conform documentației), și, de asemenea, de asteptare o funcție direct într-un controller poate cauza erori dacă acest cod se bazează pe un element care nu't a fost încă definită.

Aceasta este ceea ce fac și funcționează pentru mine:

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

Dacă nu're folosind ui-router. Apoi se's:

$scope.$on('$stateChangeSuccess', function () {
  // do something
});
Comentarii (4)
angular.element(document).ready(function () {

    // your code here

});
Comentarii (5)

Dimitri's/Mark's soluție n't de lucru pentru mine, dar folosind $timeout funcție pare să funcționeze bine pentru a se asigura codul se execută numai după marcajul este prestate.

# Your controller, including $timeout

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

$timeout($scope.init)

Sper că vă ajută.

Comentarii (3)

Puteți face acest lucru dacă doriți să urmăriți viewContentLoaded DOM obiect pentru a schimba și apoi face ceva. folosind $domeniul de aplicare.$pe de lucrări, dar prea diferit, mai ales atunci când aveți o pagină modul de rutare.

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

Puteți utiliza unghiular's $obiect fereastră:

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

O altă alternativă:

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

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

Comentarii (0)

Încă o altă alternativă, dacă aveți un controler specific doar pentru că pagina:

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

Atunci când se utilizează $routeProvider puteți rezolva pe .de stat și bootstrap dvs. de servicii. Acest lucru este de a spune, aveți de gând să-Controler de încărcare și să Vizualizați, numai după soluționarea dvs. de Servicii:

ui-rute

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

Servicii

function ourBootstrapService() {

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

Găsit Dmitri Evseev răspuns destul de util.

Cazul 1 : Folosind angularJs singur:
Pentru a executa o metoda pe pagina de încărcare, puteți utiliza ng-init în vedere și declare metoda init în controler, având în a spus că utilizarea mai greu funcție nu este recomandat, ca pe unghiulare Docs pe ng-init:

Această directivă poate fi abuzat pentru a adăuga cantități inutile de logică în șabloane. Există doar câteva utilizări ngInit, cum ar fi, de aliasing proprietăți speciale de ngRepeat, așa cum se vede în demo-ul de mai jos; și pentru injectarea de date prin intermediul server-side scripting. În afară de aceste câteva cazuri, ar trebui să utilizați controlere, mai degrabă decât ngInit pentru a inițializa valorile pe un domeniu.

HTML:

<div ng-controller="searchController()">

</div>

Controler:

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

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

    doSearch($routeParams.searchKeyword);
})

Avertisment : nu utilizați acest controler pentru un alt punct de vedere un alt intenția ca aceasta va duce la metoda de căutare fi executat acolo.

Cazul 2 : Folosind Ionic:
codul De mai sus va funcționa, doar asigurați-vă vizualiza cache-ul este dezactivat în route.js` ca:

route.js

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

Sper că acest lucru vă ajută

Comentarii (1)

Am avut aceeași problemă și numai această soluție a lucrat pentru mine (are o funcție după ce un complet de DOM a fost încărcat). Eu folosesc acest lucru pentru a defila la ancora după ce pagina a fost incarcata:

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

                        // Your function that runs after all DOM is loaded

                    });
Comentarii (0)

Puteți salva rezultatele de căutare într-un serviciu comun, care se poate folosi de oriunde și nu't de clar atunci când naviga la o altă pagină, și apoi puteți seta rezultatele de căutare cu datele salvate pentru un clic pe butonul înapoi

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

Pentru backbutton

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

apelul inițial în interiorul metodelor de sine inițializa funcție.

(function initController() {

    // do your initialize here

})();
Comentarii (0)