cloak - ng-bind-html angularjs

AngularJS: devolución de llamada después del procesamiento(trabajar con DOM después del procesamiento)

Question

¿Cómo se puede ejecutar un método $scope.myWork() después de renderizar la plantilla? Quiero establecer el $scope.value y después tengo que cambiar algo con JQuery (por ejemplo, en DOM del contenido de la plantilla). $scope.$watch(''value'', function (){....}) está funcionando "antes" del render (el DOM de la plantilla aún no está disponible). Gracias.

Answer 1

Cree una directive que ejecute su código en la función de enlace. La función de enlace se llama después de que se construye la plantilla.

Ver ng-click para obtener una idea.

Answer 2

Encontré esta página cuando buscaba una forma de perfilar la representación de DOM. He encontrado una solución muy simple que funciona para mi caso de uso.

Adjunte un controlador ng-init al elemento DOM y en la función del controlador, use $ timeout para producir la ejecución. Ejemplo:

HTML:

<div ng-init="foo()">

JS:

$scope.foo = function() {
    $timeout(function() {
        // This code runs after the DOM renders
    });
});

Answer 3

La respuesta anterior de Jens funcionará, pero tenga en cuenta que en las versiones más recientes de AngularJS (por ejemplo, 1.2.3) no puede tener esa directiva postRender en combinación con ng-repeat como atributos en la misma etiqueta, ya que ambas tienen la siguiente frase: true. En ese caso, debe eliminar transclude o tener una etiqueta separada con el atributo de directiva postRender.
También tenga en cuenta la prioridad de los atributos cuando use terminal: true, ya que podría terminar teniendo un atributo no efectivo debido a uno mayor priorizado en la misma etiqueta.

Answer 4

También tuve este problema, otras soluciones no funcionaron bien para mí, y me pareció que el tipo de cosas que Protractor debe haber resuelto. Una revisión rápida de los scripts del lado del cliente de angular.getTestability(element) muestra que utiliza angular.getTestability(element) para saber cuándo ejecutar realmente las pruebas. El método espera hasta que no haya tiempos de espera pendientes o solicitudes de http y luego ejecuta su devolución de llamada. Aquí está mi directiva:

export function afterRender ($timeout) {
"ngInject";
  return {
      restrict: ''A'',
      terminal: true,
      link: function (scope, element, attrs) {
        angular.getTestability(element).whenStable(function() {
          console.log(''[rendered]'');
        });
      }
  };
}

Answer 5

Uso terminal y transclude en una directiva de atributo para llamar a un método con ámbito después de que un modelo se actualice y la vista se represente (en mi caso para cambiar el tamaño de un iframe después de $ Resource.query):

.directive(''postRender'', [ ''$timeout'', function($timeout) {
var def = {
    restrict : ''A'', 
    terminal : true,
    transclude : true,
    link : function(scope, element, attrs) {
        $timeout(scope.resize, 0);  //Calling a scoped method
    }
};
return def;
}])

El $ timeout es magia negra. Debería ser posible declarar el método JS como el valor del atributo y $ analizarlo.

Así que lo uso en una ng-repeat (en mi caso, un árbol se representa de forma recursiva):

<div post-render ng-repeat="r in regions | orderBy:''name''" ng-include="''tree_region_renderer.html''">