Índice

Fases de ejecución de una directiva

Cuando AngularJS interpreta una vista, la ejecución de las directivas se realiza en varias fases.

El siguiente ejemplo servirá para ilustrar el mecanismo de ejecución de las directivas de una vista.

module.controller("MainController", function($scope) {  
    $scope.names = ["Sebastien", "Pierre-Alexandre"];  
});

El controlador declara una propiedad names de tipo array.

<ul ng-controller="MainController">  
    <li ng-repeat="name in names" logger>  
        <saludo-mensaje>{{name}}</saludo-mensaje>  
    </li>  
</ul>

La vista itera sobre la lista names y, para cada elemento, aplica un template compuesto por la directiva saludo-mensaje. El elemento HTML li se asocia también a la directiva logger.

module.directive("saludoMensaje", function() {  
    return {  
        restrict: "EA",  
        template: "¡Hola <span ng-transclude></span>!",  
        transclude: true  
    };  
});

La directiva saludo-mensaje inserta, simplemente, un mensaje de bienvenida. Utiliza el mecanismo de transclusión para integrar el contenido del elemento vinculado a la directiva en el template.

module.directive("logger", function() {   ...