funcion - ¿Cómo ejecutar la función del controlador AngularJS en la carga de la página?

ejecutar funcion al cargar pagina angularjs

Question

Actualmente tengo una página de Angular.js que permite buscar y mostrar resultados. El usuario hace clic en un resultado de búsqueda, luego hace clic en el botón Atrás. Quiero que los resultados de la búsqueda se muestren de nuevo, pero no puedo averiguar cómo activar la búsqueda para que se ejecute. Aquí está el detalle:

• Mi página Angular.js es una página de búsqueda, con un campo de búsqueda y un botón de búsqueda. El usuario puede escribir manualmente una consulta y presionar un botón y se activa una consulta ajax y se muestran los resultados. Actualizo la URL con el término de búsqueda. Que todo funciona bien.
• El usuario hace clic en un resultado de la búsqueda y pasa a una página diferente, lo que también funciona bien.
• El usuario hace clic en el botón Atrás y vuelve a mi página de búsqueda angular, y se muestra la URL correcta, incluido el término de búsqueda. Todo funciona bien.
• He vinculado el valor del campo de búsqueda al término de búsqueda en la URL, por lo que contiene el término de búsqueda esperado. Todo funciona bien.

¿Cómo puedo hacer que la función de búsqueda se ejecute de nuevo sin que el usuario tenga que presionar el "botón de búsqueda"? Si fuera jquery, ejecutaría una función en la función documentready. No puedo ver el equivalente de Angular.js

Answer 1

¿Prueba esto?

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

Answer 2

Al usar $ routeProvider, puede resolver en .state y arrancar su servicio. Es decir, va a cargar Controlador y Vista, solo después de resolver su Servicio:

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

Servicio

function ourBootstrapService() {

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

Answer 3

Encontrado Dmitry Evseev respuesta muy útil.

Caso 1: Usando angularJs solo:
Para ejecutar un método en la carga de la página, puede usar ng-init en la vista y declarar el método init en el controlador, habiendo dicho que no se recomienda el uso de una función más pesada, según los documentos angulares en ng-init :

Se puede abusar de esta directiva para agregar cantidades innecesarias de lógica en sus plantillas. Solo hay unos pocos usos apropiados de ngInit, como por ejemplo para el alias de propiedades especiales de ngRepeat, como se ve en la siguiente demostració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 que tenga un propósito diferente, ya que también hará que el método de búsqueda se ejecute allí.

Caso 2: Usando Ionic:
El código anterior funcionará, solo asegúrese de que la memoria caché de la vista esté deshabilitada en route.js como:

route.js

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

Espero que esto ayude

Answer 4

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

# Your controller, including $timeout

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

$timeout($scope.init)

Espero eso ayude.

Answer 5

Nunca podría conseguir que $viewContentLoaded funcionara para mí, y ng-init realmente solo debería usarse en una 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 utilizando ui-router . Entonces es:

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

Answer 6

Otra alternativa más si tiene un controlador específico para esa página:

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

Answer 7

Otra alternativa:

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

(a través de https://.com/a/30258904/148412 )

Answer 8

Por un lado, como @ Mark-Rajcok dijo que simplemente puede salirse con la función interna privada:

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

También puedes echar un vistazo a la directiva ng-init . La implementación será muy parecida 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
};

Pero cuídelo, ya que ng-init NO usar ng-init para eso. Sin embargo imo depende de la arquitectura de su aplicación.

Utilicé ng-init cuando quise pasar un valor de back-end a una aplicación angular:

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

Answer 9

Puede guardar los resultados de la 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 la búsqueda con los datos guardados para hacer clic en el botón Atrás

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

Para su backbutton

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

Answer 10

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

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

Answer 11

Puedes usar el objeto $ window de angular:

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

Answer 12

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

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

                        // Your function that runs after all DOM is loaded

                    });

Answer 13

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

    // your code here

});