javascript - before - onload angular 2

¿Cómo ejecutar la función en el controlador angular en el documento listo?

Question

Tengo una función dentro de mi controlador angular, me gustaría que esta función se ejecute en un documento listo, pero noté que angular se ejecuta cuando se crea el dom.

 function myController($scope)
 {
     $scope.init = function()
     {
        // I''d like to run this on document ready
     }

     $scope.init(); // doesn''t work, loads my init before the page has completely loaded
 }

Alguien sabe cómo puedo hacer esto?

Answer 1

Angular se inicializa automáticamente en el evento DOMContentLoaded o cuando se evalúa el script angular.js si en ese momento document.readyState está configurado como ''completo''. En este punto, Angular busca la directiva ng-app que designa la raíz de su aplicación.

https://docs.angularjs.org/guide/bootstrap

Esto significa que el código del controlador se ejecutará una vez que el DOM esté listo.

Por lo tanto es sólo $scope.init() .

Answer 2

¿Por qué no probar con lo que mencionan los documentos angulares https://docs.angularjs.org/api/ng/function/angular.element ?

elemento angular (callback)

He usado esto dentro de mi función $ onInit () {...}.

 var self = this;

 angular.element(function () {
        var target = document.getElementsByClassName(''unitSortingModule'');
        target[0].addEventListener("touchstart", self.touchHandler, false);
        ...
    });

Esto funcionó para mí.

Answer 3

Angular tiene varios puntos de tiempo para comenzar a ejecutar funciones. Si buscas algo como jQuery

$(document).ready();

Puede que este análogo en angular sea muy útil:

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

Este es útil cuando quieres manipular los elementos DOM. Comenzará a ejecutarse solo después de que todos los elementos estén cargados.

UPD: Lo que se dice arriba funciona cuando quieres cambiar las propiedades de css. Sin embargo, a veces no funciona cuando desea medir las propiedades del elemento, como el ancho, la altura, etc. En este caso, puede intentar esto:

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

Answer 4

Aquí está mi intento dentro de un controlador externo usando coffeescript. Funciona bastante bien. Tenga en cuenta que settings.screen.xs | sm | md | lg son valores estáticos definidos en un archivo no uglified que incluyo con la aplicación. Los valores corresponden a los puntos de interrupción oficiales de Bootstrap 3 para los tamaños de consulta de medios del mismo nombre:

xs = settings.screen.xs // 480
sm = settings.screen.sm // 768
md = settings.screen.md // 992
lg = settings.screen.lg // 1200

doMediaQuery = () ->

    w = angular.element($window).width()

    $scope.xs = w < sm
    $scope.sm = w >= sm and w < md
    $scope.md = w >= md and w < lg
    $scope.lg = w >= lg
    $scope.media =  if $scope.xs 
                        "xs" 
                    else if $scope.sm
                        "sm"
                    else if $scope.md 
                        "md"
                    else 
                        "lg"

$document.ready () -> doMediaQuery()
angular.element($window).bind ''resize'', () -> doMediaQuery()

Answer 5

La respuesta

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

Es el único que funciona en la mayoría de los escenarios que probé. En una página de muestra con 4 componentes, todos los cuales crean HTML a partir de una plantilla, el orden de los eventos fue

$document ready
$onInit
$postLink
(and these 3 were repeated 3 more times in the same order for the other 3 components)
$viewContentLoaded (repeated 3 more times)
$timeout execution (repeated 3 more times)

Por lo tanto, $ document.ready () es inútil en la mayoría de los casos, ya que el DOM que se está construyendo en angular puede que no esté ni mucho menos listo.

Pero más interesante, incluso después de que se haya disparado $ viewContentLoaded, el elemento de interés aún no se puede encontrar.

Solo después del $ timeout ejecutado fue encontrado. Tenga en cuenta que a pesar de que el $ timeout era un valor de 0, transcurrieron casi 200 milisegundos antes de ejecutarse, lo que indica que este hilo se mantuvo durante bastante tiempo, probablemente mientras el DOM tenía plantillas angulares agregadas en un hilo principal. El tiempo total desde la primera $ document.ready () hasta la última ejecución de $ timeout fue de casi 500 milisegundos.

En un caso extraordinario en el que se estableció el valor de un componente y luego se cambió el valor de text () más adelante en $ timeout, el valor de $ timeout tuvo que aumentarse hasta que funcionara (aunque el elemento se pudo encontrar durante el $ timeout ). Algo asíncrono dentro del componente de terceros hizo que un valor tuviera prioridad sobre el texto hasta que pasara el tiempo suficiente. Otra posibilidad es $ scope. $ EvalAsync, pero no se ha intentado.

Todavía estoy buscando ese evento que me dice que el DOM se ha establecido completamente y que se puede manipular para que todos los casos funcionen. Hasta ahora, es necesario un valor de tiempo de espera arbitrario, lo que significa que, en el mejor de los casos, es un kludge que puede no funcionar en un navegador lento. No he probado opciones de JQuery como liveQuery y publicar / suscribir que pueden funcionar, pero ciertamente no son puramente angulares.

Answer 6

Podemos usar el angular.element(document).ready() para adjuntar devoluciones de llamada para cuando el documento esté listo. Simplemente podemos adjuntar la devolución de llamada en el controlador de la siguiente manera:

angular.module(''MyApp'', [])

.controller(''MyCtrl'', [function() {
    angular.element(document).ready(function () {
        document.getElementById(''msg'').innerHTML = ''Hello'';
    });
}]);

http://jsfiddle.net/jgentes/stwyvq38/1/

Answer 7

Tuve una situación similar en la que necesitaba ejecutar una función de controlador después de que se cargó la vista y también después de que un componente particular de terceros dentro de la vista se cargó, se inicializó y colocó una referencia a sí mismo en $ scope. Lo que funcionó para mí fue configurar un reloj en esta propiedad de alcance y activar mi función solo después de que se inicializó.

// $scope.myGrid property will be created by the grid itself
// The grid will have a loadedRows property once initialized

$scope.$watch(''myGrid'', function(newValue, oldValue) {
    if (newValue && newValue.loadedRows && !oldValue) {
        initializeAllTheGridThings();
    }
});

El observador es llamado un par de veces con valores indefinidos. Luego, cuando se crea la cuadrícula y tiene la propiedad esperada, la función de inicialización se puede llamar de forma segura. La primera vez que se llama al observador con un valor nuevo no indefinido, el valor antiguo seguirá siendo indefinido.

Answer 8

Ver este post ¿Cómo ejecutar la función del controlador angular en la página de carga?
Para una búsqueda rápida:

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

De esta manera, no tiene que esperar hasta que el documento esté listo.

Answer 9

$scope.$on(''$ViewData'', function(event) {
//Your code.
});