Enlace vs compilación vs controlador

Cuando crea una directiva, puede poner código en el compilador, la función de enlace o el controlador.

En los documentos, explican que:

• La función de compilación y enlace se utiliza en diferentes fases del ciclo angular.
• los controladores se comparten entre directivas

Sin embargo, para mí no está claro, qué tipo de código debería ir a dónde.

Por ejemplo: ¿Puedo crear funciones en compilación y adjuntarlas al alcance en el enlace o solo adjuntar funciones al alcance en el controlador?

¿Cómo se comparten los controladores entre las directivas, si cada directiva puede tener su propio controlador? ¿Los controladores realmente se comparten o son solo las propiedades del alcance?

Compilar:

Esta es la fase en la que Angular realmente compila su directiva. Esta función de compilación se llama solo una vez para cada referencia a la directiva dada. Por ejemplo, supongamos que está utilizando la directiva ng-repeat. ng-repeat tendrá que buscar el elemento al que está adjunto, extraer el fragmento html al que está adjunto y crear una función de plantilla.

Si ha utilizado HandleBars, subrayar plantillas o equivalentes, es como compilar sus plantillas para extraer una función de plantilla. Para esta función de plantilla, pasa datos y el valor de retorno de esa función es el html con los datos en los lugares correctos.

La fase de compilación es ese paso en Angular que devuelve la función de plantilla. Esta función de plantilla en angular se llama función de enlace.

Fase de enlace:

La fase de vinculación es donde adjunta los datos ($ scope) a la función de vinculación y debe devolverle el html vinculado. Dado que la directiva también especifica dónde va este html o qué cambia, ya es bueno ir. Esta es la función en la que desea realizar cambios en el html vinculado, es decir, el html que ya tiene los datos adjuntos. En angular, si escribe código en la función de enlace, generalmente es la función posterior al enlace (por defecto). Es una especie de devolución de llamada que se llama después de que la función de vinculación ha vinculado los datos con la plantilla.

Controlador :

El controlador es un lugar donde pones alguna lógica específica de directiva. Esta lógica también puede entrar en la función de vinculación, pero luego tendrías que poner esa lógica en el alcance para que sea "compartible". El problema con eso es que estarías corrompiendo el alcance con tus directivas, lo cual no es realmente algo que se espera. Entonces, ¿cuál es la alternativa si dos Directivas quieren hablar entre ellas / cooperar entre ellas? Por supuesto, podría poner toda esa lógica en un servicio y luego hacer que ambas directivas dependan de ese servicio, pero eso solo trae una dependencia más. La alternativa es proporcionar un controlador para este alcance (¿generalmente aislar el alcance?) Y luego este controlador se inyecta en otra directiva cuando esa directiva "requiere" la otra.

Quería agregar también lo que el libro O'Reily AngularJS del Equipo de Google tiene que decir:

Controlador: cree un controlador que publique una API para comunicarse entre directivas. Un buen ejemplo es Directiva a la Comunicación de la Directiva

Enlace: modifique mediante programación las instancias de elementos DOM resultantes, agregue escuchas de eventos y configure el enlace de datos.

Compilar: modifique mediante programación la plantilla DOM para las características en las copias de una directiva, como cuando se usa en ng-repeat. Su función de compilación también puede devolver funciones de enlace para modificar las instancias de elementos resultantes.

A le directivepermite ampliar el vocabulario HTML de manera declarativa para crear componentes web. El ng-appatributo es una directiva, también lo es ng-controllery todos los ng- prefixed attributes. Las directivas pueden ser attributes, tagso incluso class names,comments .

Cómo nacen las directivas ( compilationy instantiation)

Compilar: Utilizaremos la compilefunción tanto para manipulateel DOM antes de que se procese como para devolver una linkfunción (que se encargará de la vinculación por nosotros). Este también es el lugar para colocar cualquier método que deba compartirse con todos losinstances esta directiva.

enlace: Utilizaremos la linkfunción para registrar a todos los oyentes en un elemento DOM específico (que se clona desde la plantilla) y configurar nuestros enlaces a la página.

Si se configuran en la compile()función, solo se habrían configurado una vez (que a menudo es lo que desea). Si se establece en la link()función, se establecerían cada vez que el elemento HTML se vincule a los datos del objeto.

<div ng-repeat="i in [0,1,2]">
    <simple>
        <div>Inner content</div>
    </simple>
</div>

app.directive("simple", function(){
   return {
     restrict: "EA",
     transclude:true,
     template:"<div>{{label}}<div ng-transclude></div></div>",        
     compile: function(element, attributes){  
     return {
             pre: function(scope, element, attributes, controller, transcludeFn){

             },
             post: function(scope, element, attributes, controller, transcludeFn){

             }
         }
     },
     controller: function($scope){

     }
   };
});

CompileLa función devuelve la función prey postenlace. En la función de preenlace tenemos la plantilla de instancia y también el alcance de controller, pero la plantilla no está vinculada al alcance y aún no tiene contenido translúcido.

PostLa función de enlace es donde el enlace de publicación es la última función que se ejecuta. Ahora el transclusionestá completo the template is linked to a scope, y el view will update with data bound values after the next digest cycle. La linkopción es solo un atajo para configurar una post-linkfunción.

controlador: el controlador de la directiva se puede pasar a otra fase de vinculación / compilación de la directiva. Se puede inyectar en otros directorios como un medio para usar en la comunicación inter-directiva.

Debe especificar el nombre de la directiva que se requiere: debe estar vinculada al mismo elemento o su elemento primario. El nombre puede tener como prefijo:

? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.

Use corchetes [‘directive1′, ‘directive2′, ‘directive3′]para requerir múltiples directivas de controlador.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope, $element) {
});

app.directive('parentDirective', function() {
  return {
    restrict: 'E',
    template: '<child-directive></child-directive>',
    controller: function($scope, $element){
      this.variable = "Hi Vinothbabu"
    }
  }
});

app.directive('childDirective', function() {
  return {
    restrict:  'E',
    template: '<h1>I am child</h1>',
    replace: true,
    require: '^parentDirective',
    link: function($scope, $element, attr, parentDirectCtrl){
      //you now have access to parentDirectCtrl.variable
    }
  }
});

Además, una buena razón para usar una función de controlador vs.enlace (ya que ambos tienen acceso al alcance, elemento y atributos) es porque puede transferir cualquier servicio o dependencia disponible a un controlador (y en cualquier orden), mientras que no puedes hacer eso con la función de enlace. Observe las diferentes firmas:

controller: function($scope, $exceptionHandler, $attr, $element, $parse, $myOtherService, someCrazyDependency) {...

vs.

link: function(scope, element, attrs) {... //no services allowed

Esta es una buena muestra para comprender las fases de la directiva http://codepen.io/anon/pen/oXMdBQ?editors=101

var app = angular.module('myapp', [])

app.directive('slngStylePrelink', function() {
    return {
        scope: {
            drctvName: '@'
        },
        controller: function($scope) {
            console.log('controller for ', $scope.drctvName);
        },
        compile: function(element, attr) {
            console.log("compile for ", attr.name)
            return {
                post: function($scope, element, attr) {
                    console.log('post link for ', attr.name)
                },
                pre: function($scope, element, attr) {
                    $scope.element = element;
                    console.log('pre link for ', attr.name)
                        // from angular.js 1.4.1
                    function ngStyleWatchAction(newStyles, oldStyles) {
                        if (oldStyles && (newStyles !== oldStyles)) {
                            forEach(oldStyles, function(val, style) {
                                element.css(style, '');
                            });
                        }
                        if (newStyles) element.css(newStyles);
                    }

                    $scope.$watch(attr.slngStylePrelink, ngStyleWatchAction, true);

                    // Run immediately, because the watcher's first run is async
                    ngStyleWatchAction($scope.$eval(attr.slngStylePrelink));
                }
            };
        }
    };
});

html

<body ng-app="myapp">
    <div slng-style-prelink="{height:'500px'}" drctv-name='parent' style="border:1px solid" name="parent">
        <div slng-style-prelink="{height:'50%'}" drctv-name='child' style="border:1px solid red" name='child'>
        </div>
    </div>
</body>

• compilar : se usa cuando necesitamos modificar la plantilla de la directiva, como agregar una nueva expresión, agregar otra directiva dentro de esta directiva
• controlador : se usa cuando necesitamos compartir / reutilizar datos de $ scope
• link : es una función que se usa cuando necesitamos adjuntar un controlador de eventos o manipular DOM.