angularjs - compile - ng-href angular 5

Enlace vs compilar vs controlador

Question

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

En la documentación, explican que:

• Las funciones de compilación y enlace se utilizan en diferentes fases del ciclo angular.
• Los controladores son compartidos entre directivas.

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

Por ejemplo: ¿Puedo crear funciones en compilación y tenerlas adjuntas al alcance en el enlace o solo agregar 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 son realmente compartidos o son solo las propiedades del alcance?

Answer 1

Además, una buena razón para usar una función de controlador vs. enlace (ya que ambos tienen acceso al alcance, el elemento y los 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) {...

contra

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

Answer 2

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 a través de directivas. Un buen ejemplo es la Directiva de Comunicación de la Directiva.

Enlace: modifique programáticamente 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 de 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 del elemento resultante.

Answer 3

Una directive permite ampliar el vocabulario HTML de forma declarativa para construir componentes web. El atributo ng-app es una directiva, por lo que es ng-controller y todos los ng- prefixed attributes . Las directivas pueden ser attributes , tags o incluso names class , comments .

Cómo nacen las directivas ( compilation y instantiation ).

Compilar: utilizaremos la función de compile para manipulate el DOM antes de que se genere y devolver una función de link (que se encargará de la vinculación). Este también es el lugar para poner cualquier método que deba compartirse con todas las instances de esta directiva.

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

Si se configuran en la función compile() , solo se habrán configurado una vez (lo que a menudo es lo que usted quiere). Si se configuran en la función link() , se establecerán cada vez que el elemento HTML esté vinculado a los datos en la 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){

     }
   };
});

Compile función de Compile devuelve la función de enlace pre y post . En la función de enlace previo tenemos la plantilla de instancia y también el alcance del controller , pero aún así, la plantilla no está vinculada al alcance y aún no tiene contenido transcluido.

Post función de enlace Post es donde el enlace posterior es la última función que se ejecuta. Ahora que la transclusion está completa, the template is linked to a scope , y la view will update with data bound values after the next digest cycle . La opción de link es solo un acceso directo para configurar una función de post-link .

controlador: el controlador de la directiva se puede pasar a otra directiva que vincula / compila la fase. Se puede inyectar en otras directivas como un medio para usar en la comunicación entre directivas.

Debe especificar el nombre de la directiva que se requiere: debe estar vinculado al mismo elemento o a su elemento principal. El nombre puede ser prefijado con:

? – 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.

Utilice el corchete [''directive1′, ''directive2′, ''directive3′] para requerir el controlador de varias directivas.

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

Answer 4

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>

Answer 5

Compilar

Esta es la fase en la que Angular compila tu 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á conectado, extraer el fragmento html al que está conectado y crear una función de plantilla.

Si ha usado HandleBars, plantillas de subrayado o equivalentes, es como compilar sus plantillas para extraer una función de plantilla. A esta función de plantilla le pasas 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 la función de enlace.

Fase de enlace:

La fase de vinculación es donde se adjuntan 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 está listo. 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 de enlace posterior (de forma predeterminada). Es una especie de devolución de llamada que se llama después de que la función de enlace haya vinculado los datos con la plantilla.

Controlador :

El controlador es un lugar donde se coloca una lógica específica de directiva. Esta lógica también puede integrarse en la función de enlace, pero luego tendría que poner esa lógica en el alcance para que sea "compartible". El problema con eso es que entonces estaría corrompiendo el alcance con el contenido de sus directivas, lo que realmente no es algo que se espera. Entonces, ¿cuál es la alternativa si dos Directivas quieren hablar entre sí / cooperar entre sí? Por supuesto, usted 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, ¿un alcance aislado?) Y luego este controlador se inyecta en otra directiva cuando esa directiva "requiere" la otra. Vea las pestañas y los paneles en la primera página de angularjs.org para ver un ejemplo.

Answer 6

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