Jak wykonać funkcję kontrolera AngularJS przy ładowaniu strony?

Obecnie mam stronę Angular.js, która umożliwia wyszukiwanie i wyświetlanie wyników. Użytkownik klika wynik wyszukiwania, a następnie klika przycisk Wstecz. Chcę, aby wyniki wyszukiwania były ponownie wyświetlane, ale nie mogę ustalić, jak uruchomić wyszukiwanie. Oto szczegół:

• Moja strona Angular.js to strona wyszukiwania z polem wyszukiwania i przyciskiem wyszukiwania. Użytkownik może ręcznie wpisać zapytanie i nacisnąć przycisk. Zostanie uruchomione zapytanie ajax, a wyniki zostaną wyświetlone. Aktualizuję adres URL za pomocą wyszukiwanego hasła. To wszystko działa dobrze.
• Użytkownik klika wynik wyszukiwania i zostaje przeniesiony na inną stronę - to też działa dobrze.
• Użytkownik klika przycisk Wstecz i wraca do mojej kątowej strony wyszukiwania. Wyświetlany jest prawidłowy adres URL, w tym wyszukiwane hasło. Wszystko działa dobrze.
• Powiązałem wartość pola wyszukiwania z wyszukiwanym terminem w adresie URL, więc zawiera on oczekiwany termin wyszukiwania. Wszystko działa dobrze.

Jak sprawić, by funkcja wyszukiwania uruchomiła się ponownie bez konieczności naciskania przez użytkownika przycisku wyszukiwania? Gdyby to była jquery, uruchomiłbym funkcję w funkcji tworzenia dokumentów. Nie widzę odpowiednika Angular.js.

Z jednej strony, jak powiedział @ Mark-Rajcok, możesz po prostu uciec od prywatnej funkcji wewnętrznej:

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

Możesz także zapoznać się z dyrektywą ng-init . Realizacja będzie podobna do:

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

Ale uważaj na to, ponieważ dokumentacja kątowa sugeruje (od wersji 1.2), aby NIE używać ng-initdo tego celu. Jednak imo zależy od architektury Twojej aplikacji.

Użyłem, ng-initgdy chciałem przekazać wartość z zaplecza do aplikacji kątowej:

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

Spróbuj tego?

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

Nigdy nie mógłbym dostać się $viewContentLoadeddo pracy i ng-initpowinienem być używany tylko w ng-repeat(zgodnie z dokumentacją), a także wywołanie funkcji bezpośrednio w kontrolerze może powodować błędy, jeśli kod opiera się na elemencie, który nie został jeszcze zdefiniowany .

Oto co robię i działa dla mnie:

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

Chyba że używasz ui-router. To jest:

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

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

    // your code here

});

Rozwiązanie Dimitri / Mark nie działało dla mnie, ale wydaje się, że użycie funkcji $ timeout działa dobrze, aby upewnić się, że kod działa tylko po renderowaniu znaczników.

# Your controller, including $timeout

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

$timeout($scope.init)

Mam nadzieję, że to pomoże.

Możesz to zrobić, jeśli chcesz obejrzeć obiekt DOM viewContentLoaded w celu zmiany, a następnie zrobić coś. użycie $ scope. $ on działa również, ale inaczej, szczególnie gdy masz jeden tryb stronicowania na swoim routingu.

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

Możesz użyć obiektu $ window angulara:

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

Inna alternatywa:

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

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

Jeszcze jedna alternatywa, jeśli masz kontroler specyficzny dla tej strony:

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

Korzystając z $ routeProvider, możesz rozwiązać na .state i uruchomić swoją usługę. Oznacza to, że załadujesz kontroler i widok, dopiero po rozwiązaniu usługi:

trasy-ui

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

Usługa

function ourBootstrapService() {

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

Odpowiedź Dmitrija Evseeva była dość przydatna.

Przypadek 1: Używanie samego angularJs:
Aby wykonać metodę przy ładowaniu strony, możesz użyć ng-initw widoku i zadeklarować metodę init w kontrolerze, powiedząc , że użycie cięższej funkcji nie jest zalecane, zgodnie z Angular Docs na ng-init :

Ta dyrektywa może być nadużywana, aby dodać niepotrzebne ilości logiki do twoich szablonów. Istnieje tylko kilka odpowiednich zastosowań ngInit, na przykład do aliasingu specjalnych właściwości ngRepeat, jak pokazano w pokazie poniżej; oraz do wstrzykiwania danych za pomocą skryptów po stronie serwera. Poza tymi kilkoma przypadkami powinieneś używać kontrolerów zamiast ngInit do inicjowania wartości w zakresie.

HTML:

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

Kontroler:

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

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

    doSearch($routeParams.searchKeyword);
})

Ostrzeżenie: nie używaj tego kontrolera do innego widoku przeznaczonego dla innej intencji, ponieważ spowoduje to również wykonanie tam metody wyszukiwania.

Przypadek 2: Korzystanie z Ionic:
powyższy kod będzie działał, po prostu upewnij się, że pamięć podręczna widoku jest wyłączona w route.js:

route.js

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

Mam nadzieję że to pomoże

Miałem ten sam problem i tylko to rozwiązanie działało dla mnie (uruchamia funkcję po załadowaniu pełnego DOM). Używam tego do przewijania w celu zakotwiczenia po załadowaniu strony:

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

                        // Your function that runs after all DOM is loaded

                    });

Możesz zapisać wyniki wyszukiwania we wspólnej usłudze, z której można korzystać z dowolnego miejsca i nie usuwa się po przejściu do innej strony, a następnie można ustawić wyniki wyszukiwania za pomocą zapisanych danych dla kliknięcia przycisku Wstecz

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

Dla twojego przycisku

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

wywoływać metody początkowe w ramach funkcji samodzielnej inicjalizacji.

(function initController() {

    // do your initialize here

})();