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

Spróbuj tego?

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

Nigdy nie mogłem uzyskać $viewContentLoaded do pracy dla mnie, a ng-init powinny być używane tylko w ng-repeat (zgodnie z dokumentacją), a także wywołanie funkcji bezpośrednio w kontrolerze może spowodować błędy, jeśli kod opiera się na elemencie, który nie został jeszcze zdefiniowany.

To jest to co robię i to działa dla mnie:

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

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

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

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

    // your code here

});

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

# Your controller, including $timeout

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

$timeout($scope.init)

Możesz to zrobić, jeśli chcesz obejrzeć obiekt DOM VIEWCONTENTLOADED, aby go zmienić, a następnie coś zrobić. użycie $scope.$on też działa, ale inaczej, zwłaszcza gdy masz tryb jednej strony na routingu.

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

Możesz użyć obiektu $window:

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

Inna alternatywa:

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

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

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

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

Podczas używania $routeProvider można rozwiązać .stan i bootstrap swoje usługi. Oznacza to, że ładujesz kontroler i przeglądasz, dopiero po rozwiązaniu Usługi:

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

Serwis

function ourBootstrapService() {

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

Odpowiedź Dmitry Evseev jest bardzo przydatna.

Przypadek 1: Używanie samego angularJs:
aby wykonać metodę podczas ładowania strony, możesz użyć ng-init w widoku i zadeklarować metodę init w kontrolerze, mówią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 szablonów. Istnieje tylko kilka odpowiednich zastosowań ngInit, takich jak aliasing specjalne właściwości ngRepeat, jak widać w demie poniżej; oraz do wstrzykiwania danych poprzez skrypty po stronie serwera. Poza tymi kilkoma przypadkami, powinieneś używać kontrolerów zamiast ngInit do inicjalizacji 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);
})

Warning: nie używaj tego kontrolera do innego widoku przeznaczonego dla innej intencji, ponieważ spowoduje to, że metoda Wyszukiwania również zostanie uruchomiona.

Przypadek 2: Użycie Jonowy:
powyższy kod będzie działał, tylko upewnij się, że pamięć podręczna widoku jest wyłączona w route.js jako:

Trasa.js

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

Hope this helps

Miałem ten sam problem i tylko to rozwiązanie działało na mnie (uruchamia funkcję po załadowaniu pełnego DOM). Używam tego do przewijania do 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, która może być używana z dowolnego miejsca i nie jest jasna podczas przechodzenia do innej strony, a następnie możesz ustawić wyniki wyszukiwania z zapisanymi danymi dla kliknięcia przycisku Wstecz

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

Dla Twojego backbuttona

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