Cómo ejecutar la función AngularJS controller on page load?

Pruebe esto?

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

Nunca logré que $viewContentLoaded funcionara para mí, y ng-init realmente solo debería usarse en un ng-repeat (según la documentación), y también llamar a una función directamente en un controlador puede causar errores si el código se basa en un elemento que aún no se ha definido.

Esto es lo que hago y funciona para mí:

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

A menos que estés usando ui-router. Entonces es:

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

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

    // your code here

});

La solución de Dimitri/Mark no funcionó para mí, pero usar la función tim timeout parece funcionar bien para garantizar que su código solo se ejecute después de que se renderice el marcado.

# Your controller, including $timeout

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

$timeout($scope.init)

Espero que ayude.

Puede hacer esto si desea ver el objeto DOM viewContentLoaded para cambiar y luego hacer algo. usando scope scope.on on también funciona, pero de manera diferente, especialmente cuando tiene un modo de página en su enrutamiento.

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

Puede usar el objeto angular window de angular:

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

Otra alternativa:

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

(vía https://stackoverflow.com/a/30258904/148412 )

Otra alternativa si tienes un controlador específico para esa página:

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

Al usar rout routeProvider puede resolver sobre.estado y arranque su servicio. Es decir, va a cargar el Controlador y la vista, solo después de resolver su Servicio:

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

Servicio

function ourBootstrapService() {

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

Encontrado Dmitry Evseev respuesta bastante útil.

Caso 1: Usando AngularJS solo:
Para ejecutar un método al cargar la página, puede usar ng-init en el método view and declare init en el controlador, habiendo dicho que no se recomienda el uso de funciones más pesadas, según los documentos angular en ng-init :

Se puede abusar de esta directiva para añadir cantidades innecesarias de lógica a sus plantillas. Solo hay unos pocos usos apropiados de ngInit, como para aliasing propiedades especiales de ngRepeat, como se ve en la demostración a continuación; y para inyectar datos a través de scripts del lado del servidor. Además de estos pocos casos, debe usar controladores en lugar de ngInit para inicializar valores en un ámbito.

HTML:

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

Controlador:

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

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

    doSearch($routeParams.searchKeyword);
})

Advertencia: No utilice este controlador para otra vista destinada a una intención diferente, ya que hará que el método de búsqueda se ejecute allí también.

Caso 2: Uso Iónico:
El código anterior funcionará, solo asegúrese de que la caché de vista esté desactivada en el route.js como:

Ruta.js

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

Espero que esto ayude

Tuve el mismo problema y solo esta solución funcionó para mí (ejecuta una función después de que se haya cargado un DOM completo). Utilizo esto para el desplazamiento para anclar después de que la página se ha cargado:

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

                        // Your function that runs after all DOM is loaded

                    });

Puede guardar los resultados de búsqueda en un servicio común que puede usar desde cualquier lugar y no se borra cuando navega a otra página, y luego puede configurar los resultados de búsqueda con los datos guardados para el clic del botón atrás

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

Para el botón trasero

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