Este tutorial utiliza la versión AngularJS: 1.5.3
Angularjs Github: https://github.com/angular/angular.js/
Dirección de descarga de AngularJS: https://angularjs.org/
Resumen: Directiva (Instrucciones) El autor cree que es una de las funciones muy poderosas y útiles de AngularJ. Es equivalente a escribir un elemento DOM personalizado o atributo de ATtr o ATTR de elemento de clase personalizado, y no es solo que, también puede manipular el alcance, vincular eventos, cambiar estilos, etc. sobre su base. A través de esta directiva, podemos encapsular muchas instrucciones públicas, como instrucciones de paginación, instrucciones de finalización automática, etc. Entonces, solo necesita escribir una sola línea de código en la página HTML para lograr muchas funciones poderosas. En términos generales, la directiva debe usarse para tener los siguientes escenarios:
1. Haga que su HTML sea más semántico y no necesita estudiar el código y la lógica en profundidad para conocer la lógica general de la página.
2. Resumen un componente personalizado y reutilízalo en otro lugar.
1. La definición de directiva y su método de uso
La definición de la Directiva AngularJS es más o menos como sigue
Angular.module ("App", []). Directiva ("DirectiveName", function () {return {// Definir configurando elementos};})La directiva se puede colocar en nombres de elementos, atributos, clases y comentarios. La siguiente es la forma equivalente de citar a MyDir, la directiva. (Pero muchas directivas se limitan al uso de "propiedades")
<span <span style = "Font-Family: Arial, Helvetica, Sans-Serif;"> Directive-Name </span> <span style = "Font-Family: Arial, Helvetica, Sans-Serif;"> = "Exp"> </span> // Propiedades </span> <span style = "Font-Family: Arial, Helvetica, Helvetica, sans-serif; "> Nombre de la directiva </span> </<span style =" font-family: arial, helvetica, sans-serif; ">-name de la directiva </span>> </<span span style =" font-family: arial, helvetica, sans-serif; " sans-serif; "> Nombre de la Directiva </span>> // elemento <!-Directiva: <span style =" Font-Family: Arial, Helvetica, Sans-Serif; "> Directive-Name </span> <span style =" Font-Family: Arial, Helvetica, Sans-Serif; "> exp-> // notas </span>
El siguiente ejemplo:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </scritch> </sad> <body> <Helloworld> </ose-world> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', plantlate: '<iv> hola soy lin bingwen ~~~ </div>', reemplazar: true};}); </script> </html>resultado:
A continuación se muestra una versión detallada de directiva
var mymodule = angular.module (...); mymodule.directive ('directiveName', function factory (inyectable) {var directiveSeFinitionEnting = {priority: 0, Template: '<div> </div>', templateUrl: 'directive.html', reemplazar: falso, transclude: falso, restrict: 'a', scope: false, compilio: function compilement (telement, tatement, tattrs, transcluD Pre: Función Prelink (alcance, iElement, IATTRS, Controller) {...}, Post: Function Postlink (Scope, IElement, IATTRS, Controller) {...}}}, enlace: function Postlink (Scope, iElement, IATTRS) {...}};2. Interpretación del contenido de comando de directiva
Puedes ver que tiene 8 contenidos
1. Restricto
(String) Parámetros opcionales indican la forma de la instrucción que se declara en el DOM; Los valores son: e (elemento), a (atributo), c (clase), m (notación), y el valor predeterminado es a; Por supuesto, dos también se pueden usar juntos, como EA. La representación puede ser un elemento o un atributo.
[HTML] Ver fragmentos de código de vista de copia simple en el código derivado de mi fragmento de código
E (Elemento): <DirectiveName> </directivengeame>
A (propiedad): <divirdleiveNameMe = 'Expression'> </div>
C (clase): <div class = 'directiveName'> </div>
M (nota): <-Directiva: DirectiveName Expression->
En términos generales, E/A/C se usa con más frecuencia.
2. Prioridad
(número), parámetros opcionales, especifique la prioridad de la instrucción. Si hay múltiples instrucciones en un solo DOM, la prioridad más alta se ejecutará primero;
3.Terminal
(Boolean), parámetro opcional, se puede establecer en True o False. Si se establece en True, otras instrucciones con una prioridad inferior a esta instrucción no serán válidas y no se llamará (la que tenga la misma prioridad aún se ejecutará)
4.Template (cadena o función) Parámetros opcionales, que pueden ser:
(1) Un pedazo de texto HTML
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </scritch> </sad> <body> <Helloworld> </ose-world> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', plantlate: '<div> <h1> hola soy lin bingwen ~~~ </h1> </div>', reemplazar: true};}); </script> </html>(2) Una función puede aceptar dos parámetros de telement y tattrs
donde el telement se refiere al elemento que usa esta directiva, y TATTRS es el atributo de la instancia, que es una colección (objeto) compuesta por todos los atributos en el elemento, como:
<hello-world2 title = 'Soy la segunda directiva'> </ Helloworld2>
El título es el atributo de los tatuajes
Veamos qué sucede cuando la plantilla es una función
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </scritch> </sad> <body> <Helloworld> </ose-world> <hello-world2 title = 'Soy la segunda directiva'> </sule-world2> </body> <script type = "text/javaScript"> var app = angular.module ('myapp', []); app.directive ('helloworld', function () {return {restrict: 'e', plantlate: '<div> <h1> hola soy lin bingwen ~~~ </h1> </div>', reemplazar: true};}); app.directive ("helloWOrld2", function () {return {restrict: 'eac', platplate: function (telement, tattrs) {var _html = ''; _html += '<div>' +'hola' +tattrs.title +'</siv>'; return _html;}};}); </script> </html>resultado:
Puede ver que el campo de título en la etiqueta en Hello-World2 también se usa en la Directiva.
5.templateUrl (cadena o función), parámetro opcional, puede ser
(1) Una cadena que representa la ruta del archivo HTML
(2) Una función puede aceptar dos parámetros de telement y tattrs (aproximadamente lo mismo que el anterior)
Nota: Durante el desarrollo local, debe ejecutar un servidor, de lo contrario, usar TemplateURL causará un error de Script de solicitud de origen cruzado (CORS). Dado que la carga de plantillas HTML se carga asincrónicamente, cargar una gran cantidad de plantillas ralentizará el sitio web. Aquí hay un truco, que es para almacenar en caché la plantilla primero
Puede cargar su página de índice e incluir el siguiente código como parte de su página.
<script type = 'text/ng-template' id = 'hello.html'> <div> <h1> hola soy lin bingwen ~~~ </h1> </div> </script>
El atributo de identificación aquí se establece en TemplateUrl.
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </scritch> </sad> <body> <Helloworld> </ose-world> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', templateUrl: 'hello.html', reemplazar: true};}); </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1> hola soy lin bingwen ~~~ </h1> </div> </script> </html>Resultado de salida:
Otra forma de almacenar en caché es:
app.run (["$ TemplateCache", function ($ TemplateCache) {$ TemplateCache.put ("Hello.html", "<Div> <h1> Hola, soy Lin Bingwen ~~~ </h1> </div>");}]);Los ejemplos de uso son los siguientes:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </scritch> </sad> <body> <Helloworld> </ose-world> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.directive ('helloworld', function () {return {restrict: 'e', templateUrl: 'hello.html', reemplazar: true};}); app.run (["$ TemplateCache", function ($ TemplateCache) {$ TemplateCache.put ("Hello.html", "<Div> <h1> Hola, soy Lin Bingwen ~~~ </h1> </div>");}]); </script> </html>resultado:
De hecho, el primer método es mejor, será más rápido escribir. El autor tiene la mayor cantidad y el primer método para escribir, que se incluye directamente en SCPRIT.
6. Replacos
(Valor booleano), el valor predeterminado es falso. Cuando se establece en True, echemos un vistazo al siguiente ejemplo (compare los ejemplos dados en la plantilla)
Cuando el reemplazo es verdadero, la etiqueta Hello-World ya no está allí, de lo contrario, existe.
7.
(1) El valor predeterminado es falso. Indica la herencia del alcance principal;
(2) Verdadero. Indica heredar el alcance principal y crear su propio alcance (alcance infantil);
(3) {}. Indica crear un alcance de aislamiento completamente nuevo;
7.1 Primero, comprendamos el mecanismo de herencia del alcance. Usemos el comando NG-Controller como ejemplo.
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js" ng-Controller = 'principalController'> Padre: {{name}} <input ng-model = "name"/> <div my-directive> </div> </div> </body> <script type = "text/javaScript"> var app = angular.module ('myapp', []); app.controller ('principalController', function ($ scope) {$ scope.name = 'lin bingwen';}); app.directive ('myDirective', function () {return {restrict: 'ea', scope: false, plantlate: '<iv> son: {{name}} <input ng-model = "name"/> </div>'};}); </script> </html>A continuación, utilizamos un ejemplo simple y claro para ilustrar las diferencias en los valores de alcance:
Alcance: Falso
Alcance: verdadero
alcance:{}
Cuando es falso, el hijo hereda el valor del padre y cambia el valor del padre, y el valor del hijo también cambia, y viceversa. (La herencia no está aislada)
Cuando es cierto, el hijo hereda el valor del padre y cambia el valor del padre. El valor del hijo cambia en consecuencia, pero cuando cambia el valor del hijo, el valor del padre permanece sin cambios. (Herencia y aislamiento)
Cuando {}, el valor del padre no se hereda, por lo que el valor del hijo está vacío. Cambiar el valor de cualquiera de las partes no puede afectar el valor de la otra parte. (Sin herencia y aislamiento)
Consejo: el alcance de aislamiento es una buena opción cuando desea crear un componente reutilizable. Al aislar los ámbitos, nos aseguramos de que las directivas sean "independientes" y se puedan insertar fácilmente en cualquier aplicación HTML, y este enfoque evita que el alcance principal se contamine;
7.2 ESCUPOS DE AISLACIÓN Puede acceder a las propiedades del alcance principal a través de políticas de unión.
La directiva proporciona tres formas de interactuar con lugares fuera del aislamiento al usar el alcance de aislamiento. Estos tres son
@ Binde un atributo de alcance local al valor de propiedad del nodo DOM actual. El resultado es siempre una cadena, porque el atributo DOM es una cadena.
& Proporciona una forma de ejecutar una expresión en el contexto del alcance principal. Si no se especifica el nombre ATTR, el nombre del atributo es el mismo nombre local.
= Crear una unión de dos vías entre el atributo de alcance local y el nombre del atributo del alcance principal a través del valor del atributo ATTR de directiva.
@ atributo de alcance local
@ Método Los atributos locales se utilizan para acceder a los valores de cadena definidos por el entorno externo de la Directiva, principalmente vinculando valores de cadena externa a través del atributo de etiqueta donde se encuentra la directiva. Este enlace es unidireccional, es decir, los cambios vinculantes del alcance principal. Las propiedades del alcance en la directiva cambiarán sincrónicamente, mientras que los cambios de unión en el alcance están aislados y no se conoce el alcance principal.
El siguiente ejemplo: la directiva declara que el tipo de alcance no está aislado, y usa el atributo de nombre de enlace @, y utiliza el atributo de nombre para unir el atributo en el alcance principal en la directiva. Al cambiar el valor del atributo en el alcance principal, la directiva actualizará el valor sincrónicamente. Al cambiar el valor de la propiedad del valor de la propiedad del alcance del alcance de la directiva, el alcance principal no puede actualizar el valor sincrónicamente.
Código JS:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js" ng-Controller = "MyController"> <Div> <Viv> Alcance principal: <iv> say: {{name}} <br> Cambie el nombre del ámbito principal: <input type = "text" value = "" ng-model = "name"/> </div> </div> <div> alcance isolado: <divisado-directive name = "{{{{{{{{}} </div> <div> alcance aislado (no usando el alcance principal {{name}}): <diviseLated-darrective name = "name"> </div> </div> </div> </body> <script type = "text/javaScript"> var app = angular.module ('myapp', []); app.controller ("mycontroller", function ($ scope) {$ scope.name = "hello world";}). directive ("aisladoDirective", function () {return {scope: {name: "@"}, plantate: 'say: {{name}}} <Br> Cambiar el nombre del scope aislado: <type de entrada butt " ng-model = "name"> '}; </script> </html>Resultados: el efecto inicial de la página
Efecto de animación:
Puede ver que el contenido en el alcance principal ha cambiado, y el alcance infantil ha cambiado al mismo tiempo. Y el contenido en el subescopio ha cambiado. ¡No afecta el contenido del alcance principal!
= Atributo de alcance local
= Crear una unión de dos vías entre el atributo de alcance local y el nombre del atributo del alcance principal a través del valor del atributo ATTR de directiva.
Es decir, cuando desea una propiedad límite de dos vías, puede usar = para introducir propiedades externas. Ya sea cambiando el alcance principal o aislar las propiedades en el alcance, el alcance principal y el alcance de aislamiento actualizarán los valores de las propiedades al mismo tiempo porque son relaciones bidireccionales.
Código de muestra:
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js" ng-controller="myController"> <div>Parent scope: <div>Say: {{user.name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="userBase.name"/></div> </div> <div>isolated scope: <div isolated-directive user="userBase"></div> </div> </div> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.controller ("mycontroller", function ($ scope) {$ scope.userBase = {name: 'hello', id: 1};}). Directiva ("IsolatedDirective", function () {return {Scope: {user: "="}, Template: 'Say: {{{{{User.name}}}}}}}}}}} el nombre de la aislada de la aislada: type = "buttom" value = "" ng-model = "user.name"/> '}}) </script> </html>Efecto:
¡Puede ver que el contenido en el alcance principal y el alcance infantil es siempre el mismo!
y atributos de alcance local
El método & proporciona una forma de ejecutar directamente una expresión en el contexto del alcance principal. Esta expresión puede ser una función.
Por ejemplo, cuando escribe una directiva, cuando el usuario hace clic en un botón, la Directiva quiere notificar al controlador, el controlador no puede saber qué está sucediendo en la Directiva. Tal vez pueda hacerlo usando la transmisión de eventos en Angular, pero debe agregar un método de escucha para el evento al controlador.
La mejor manera es habilitar la directiva para pasar una función en un alcance principal. Cuando hay alguna acción en la directiva que debe actualizarse al alcance principal, se puede ejecutar un código o una función en el contexto del alcance principal.
El siguiente ejemplo ejecuta la función del alcance principal en la directiva.
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js" ng-Controller = "myController"> <div> alcance parent: <div> say: {{valor}} </div> </div> <div> alcance aislado: <diviseated-directive action = "click ()"> </div> </div> </body> <scry tipo = "text/javaScript"> var app = angular.module ('myApp', [] [] [] MyApp '; app.controller ("mycontroller", function ($ scope) {$ scope.value = "hello world"; $ scope.click = function () {$ scope.value = math.random ();};}). Directiva ("ISOLADADIRATION", function () {return {Scope: {Action: "&"}, Template: typexi value = "Ejecutar el método de la definición del alcance principal en la directiva" ng-c-cick = "action ()"/> '}}) </script> </html>Efecto:
Hay muchos contenidos de instrucciones, hablemos de transcluir, compllar, enlace y controlador.
8. Transcluir
Si no desea que el contenido dentro de la directiva sea reemplazado por la plantilla, puede establecer este valor en verdadero. En general, debe usarse con la Directiva NGTransclude. Por ejemplo: plantilla: "<Div> Hola todos <Div ng-Transclude> </div> </div>", en este momento, el contenido dentro de la instrucción se incrustará en el Ng-Transclude Div. Es decir, se convierte en <div> hola cada <div> Este es el contenido dentro del comando </div> </div>. El valor predeterminado es falso; Esta opción de configuración nos permite extraer el contenido contenido en el elemento de directiva y luego colocarlo en una posición específica en la plantilla de directiva. Cuando habilita Transclude, puede usar Ng-Transclude para indicar dónde colocar contenido traducido
<! Doctype html> <html lang = "zh" ng-app = "myapp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs <//title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </script> </scade> <shivebox "Diverebox" SRC = ULE. enlace </li> <li> Segundo enlace </li> </ul> </div> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.directive ('sidebox', function () {return {restrict: 'ea', scope: {title: '@'}, traduce: true, template: '<div>/ <div>/ <h2> {{title}} </ h2>/ <span ng-transclude>/ </span>/ </iv>/ </div>'};}); </script> </html>resultado:
Cuando se traslada: falso,
Si la instrucción usa el parámetro Transclude, el controlador no puede monitorear los cambios en el modelo de datos normalmente. Se recomienda utilizar el servicio $ Watch en la función de enlace.
9.Controller
Puede ser una cadena o una función.
Si es una cadena, use la cadena como el nombre del controlador para encontrar el constructor del controlador registrado en la aplicación.
angular.module ('myApp', []) .Directive ('myDirective', function () {restrict: 'a', // controlador: 'somecontroller'}) // Otros lugares en la aplicación pueden ser el mismo archivo u otro archivo contenido en index.html angular.module ('myApp'. $ attrs, $ transclude) {// La lógica del controlador se coloca aquí}); También se puede definir como funciones anónimas directamente dentro de la instrucción, y podemos inyectar cualquier servicio aquí ($ log, $ timeOut, etc.) [html] Ver copia simple Ver el código de código en código derivado de mi código slice angular.module ('myApp', [] .Directive ('miDirective', function () {restrict: 'a', controlador: function ($ chope, $, $, $, $, $, $, $, $, $ copo, $, $, $, $ copo, $, $, $, $ copo, $, $, $ copo, $, $ copo, $, $ copo, $, $ copo, $, $ copo, $, $, $ $ transclude) {// La lógica del controlador se coloca aquí}});También hay algunos servicios especiales (parámetros) que se pueden inyectar
(1) $ alcance, alcance asociado con elementos directivos
(2) elemento $, el elemento correspondiente a la instrucción actual
(3) $ attrs, un objeto compuesto por atributos del elemento actual
(4) $ transclude, función de enlace integrado, funciones ejecutadas en realidad utilizadas para clonar elementos y operar DOM
Nota: A menos que se use para definir algún comportamiento reutilizable, generalmente no se recomienda aquí.
Las funciones del controlador y el enlace de la instrucción (que se discutirán más adelante) se pueden intercambiar. La diferencia es que el controlador se usa principalmente para proporcionar un comportamiento que se puede reutilizar entre las instrucciones, pero la función de enlace del enlace solo puede definir el comportamiento en las instrucciones internas actuales y no puede reutilizarse entre las instrucciones.
<! DocType html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> introducción a angularjs </title> <script type = "text/javaScript" src = "./ 1.5.3/angular.min.js"> </script> </head> <hello myColor = "Red" Bingwen ~~~ </ello> </body> <script type = "text/javaScript"> var app = angular.module ('myApp', []); app.directive ('hello', function () {return {restrict: 'ea', transclude: true, // Tenga en cuenta que debe estar configurado en verdadero controlador: function ($ scope, $ element, $ attrs, $ transclude, $ log) {// aquí puede inyectar el servicio que desea $ transclude (function (clone) {var a = angular.element ('<p>'; $ attrs.mycolor); </script> </html>Resultado de salida:
Y salga hola a todos en la consola
Veamos $ transclude (); Aquí, puede tomar dos parámetros, el primero es $ alcance, alcance, y el segundo es una función de devolución de llamada con el clon de parámetros. Y este clon es en realidad el contenido integrado (envuelto por jQuery), y puede hacer muchas operaciones DOM en él.
Su forma más fácil es
<script> angular.module ('myApp', []). Directiva ('mySite', function () {return {restrict: 'ea', transclude: true, controler: function ($ scope, $ element, $ attrs, $ transclude, $ log) {var a = $ transclude (); // $ transclude () es el contenido empedido $ elemento. </script>Nota: El uso de $ Transclude generará un nuevo alcance.
Por defecto, si usamos simplemente y prácticamente $ transclude (), entonces el alcance predeterminado es el alcance generado por $ transclude
Pero si usamos $ transclude ($ alcance, función (clone) {}), entonces el alcance es el alcance de la directiva
Entonces la pregunta llega de nuevo. ¿Qué pasa si queremos usar el alcance principal?
$ alcance. $ parent se puede usar
Del mismo modo, si desea un nuevo alcance, también puede usar $ alcance. $ Parent.new ();
10.Controlleras
Esta opción se usa para establecer el alias de su controlador.
En el pasado, a menudo utilizamos este método para escribir código:
angular.module ("app", []) .Controller ("Democontroller", ["$ scope", function ($ scope) {$ scope.title = "angualr";}]) <div ng-app = "app" ng-controller = "Democontroller"> {{Title}}} </biv>Más tarde, AngularJS1.2 nos trajo nuevo azúcar de sintaxis, para que podamos escribirlo así
angular.module ("app", []) .Controller ("Democontroller", [function () {this.title = "angualr";}]) <div ng ng-app = "app" ng-controller = "Democontroller como demo"> {{Demo.title}}} <ductiv>También podemos escribir esto en el comando
<script> angular.module ('myApp', []). Directive ('mySite', function () {return {restrict: 'ea', transclude: true, controler: 'somecontroller', controleras: 'principal controller' //..Other Configuration};}); </script>11.Require (cadena o matriz)
Una cadena representa el nombre de otra instrucción, que se utilizará como el cuarto parámetro de la función de enlace. Podemos dar un ejemplo para ilustrar el uso específico. Supongamos que tenemos que escribir dos instrucciones ahora. Hay muchos métodos superpuestos en la función de enlace del enlace (la función de enlace se discutirá más adelante). En este momento, podemos escribir estos métodos repetidos en el controlador de la tercera instrucción (el controlador también se menciona anteriormente para proporcionar el comportamiento de reutilización entre las instrucciones). Luego, en estas dos instrucciones, requiera la instrucción con el campo del controlador (la tercera instrucción).
Finalmente, puede consultar estos métodos superpuestos a través del cuarto parámetro de la función de enlace del enlace.
<! Doctype html> <html ng-app = "myapp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"> </script> </head> <outer> <outinective> <ner-directive2> </nner-directive2> </uterter-directive> <script> var app = angular.module ('myApp', []); app.directive ('outerDirective', function () {return {scope: {}, restrict: 'ae', controlador: function ($ scope) {this.say = function (somedirective) {console.log ('got:' + satedirective.message);};}};}); app.directive ('innerDirective', function () {return {scope: {}, restrict: 'ae', requerir: '^exterdirective', link: function (scope, elem, attrs, controlerInstance) {scope.message = "hi, leifeng"; controlerInstance.say (Scope);};};}); app.directive ('innerDirective2', function () {return {scope: {}, restrict: 'ae', request: '^ourdirective', link: function (scope, elem, attrs, controlerInStance) {scope.message = "Hi, shushu"; controlerInstance.say (Scope);};};}); </script> </body> </html>Las instrucciones innerectivas y directivas innirectivas2 en los métodos de reutilización de ejemplo anteriores definidos en el controlador de la directiva externa.
Se explica además que el controlador en la instrucción se utiliza para comunicarse entre diferentes instrucciones.
Además, podemos agregar un prefijo al valor del parámetro de requerir, lo que cambiará el comportamiento del controlador de búsqueda:
(1) Sin un prefijo, la instrucción se buscará en el controlador proporcionado por sí mismo. Si no se encuentra ningún controlador, se lanzará un error.
(2)? Si el controlador requerido no se encuentra en la instrucción actual, NULL se pasará al cuarto parámetro de la función de conexión de enlace
(3)^Si el controlador requerido no se encuentra en la instrucción actual, se encontrará el controlador del elemento principal
(4)?^ Combinación
12. Proceso de compilación de instrucciones de Anguar
Primero cargue la biblioteca AngularJS y encuentre la Directiva NG-APP para encontrar los límites de la aplicación.
Llame al servicio de compilación $ para la compilación de acuerdo con el alcance definido por NG-APP. AngularJS atravesará todo el documento HTML y procesará las instrucciones declaradas en la página de acuerdo con la prioridad de las instrucciones de acuerdo con las instrucciones. El DOM se convierte de acuerdo con los parámetros de configuración (plantilla, lugar, transcluir, etc.) en las instrucciones y luego comienza a ejecutar la función de compilación de cada instrucción en orden (si la función de compilación se define en la instrucción) para convertir la plantilla misma.
Nota: La función de compilación aquí está configurada en nuestra directiva, que es diferente del servicio de compilación $ mencionado anteriormente. Después de ejecutar cada función de compilación, se devolverá una función de enlace y todas las funciones de enlace se combinarán en una función de enlace grande.
Luego, esta gran función de enlace se ejecutará, principalmente para el enlace de datos, modificando dinámicamente los datos en el alcance registrando un oyente en el DOM, o utilizando $ relojes para escuchar las variables en el alcance para modificar el DOM, estableciendo así la vinculación bidireccional, etc. Si la función de compilación no está configurada en nuestra instrucción, la función de enlace que nos configurará. Lo que hace es más o menos lo mismo que la función de enlace grande sintetizada por todas las funciones de enlace después de que la compilación regrese arriba.
Por lo tanto: en la Directiva, las opciones de compilación y enlace son mutuamente excluyentes. Si estas dos opciones se establecen al mismo tiempo, la función devuelta por compilación se considerará como una función de enlace, y la opción de enlace en sí se ignorará.
13. Compilar la función
Compilar de funciones (Telement, Tattrs, Transclude) {...}
Las funciones de compilación se utilizan para manejar situaciones donde la plantilla DOM necesita ser modificada. Debido a que la mayoría de las instrucciones no requieren modificación de la plantilla, esta función no se usa comúnmente. Los ejemplos que deben usarse incluyen ngtrepeat, que requiere que la plantilla se modifique, y NGView requiere que el contenido se cargue de forma asincrónica. La función compilada acepta los siguientes parámetros.
TELEMENTO - Elemento de plantilla - el elemento en el que reside la directiva. Es seguro deformar este elemento y sus subelementos.
TATTRS - Atributos de plantilla - Todos los atributos declarados por la Directiva en este elemento se comparten en la función compilada.
TRANSCLUDE: una función de función de enlace incrustada (alcance, clonelinkingfn).
Nota: No realice ninguna operación que no sea la deformación DOM en la función compilada. Más importante aún, el registro de eventos de escucha DOM debe hacerse en la función vinculada, no en la función compilada.
Una función compilada puede devolver un objeto o función.
Función de retorno: equivalente a una función de enlace registrada utilizando el atributo de enlace del objeto de configuración cuando la función compilada no existe.
Objeto de retorno: devuelve un objeto que ha registrado una función a través del atributo previo o post. Consulte la explicación de las funciones previas a la reticulación y posterior a la luz a continuación.
14. Función de vinculación
enlace de funciones (alcance, iElement, IATTRS, controlador) {...}
La función de enlace es responsable de registrar eventos DOM y actualizar el DOM. Se ejecuta después de que se clone la plantilla, y también es donde se escribe la mayoría del código lógico de instrucciones.
Alcance: el alcance que las directivas necesitan escuchar.
iElement - Elemento de instancia - El elemento donde reside la directiva. Es seguro operar en elementos infantiles de elementos en la función posterior al enlace, porque todos están vinculados.
IATTRS - Atributos de instancia - Atributos de instancia, una lista estandarizada de atributos declarados en el elemento actual, que se comparten entre todas las funciones vinculadas.
Controlador - Instancia del controlador, es decir, controlador dentro de Direct2 solicitado por la instrucción actual. Por ejemplo: controlador: function () {this.addstrength = function () {}} En la directiva direct2, entonces, en la función de enlace de la directiva actual, puede llamarlo a través de controler.addshong.
La función previa a la reticulación se ejecuta antes de que los elementos infantiles estén vinculados. No se puede usar para deformar DOM en caso de que la función de enlace no pueda encontrar el elemento correcto en el enlace.
Función posterior a la luz Todos los elementos se ejecutan después de estar vinculados.
ilustrar:
La opción de compilación en sí no se usa con frecuencia, pero la función de enlace se usa con frecuencia. Esencialmente, cuando establecemos la opción de enlace, en realidad creamos una función de enlace Postlink () para que la función Compile () pueda definir la función de enlace. En general, si se establece la función de compilación, significa que queremos realizar operaciones DOM antes de que las instrucciones y los datos en tiempo real se coloquen en el DOM. Es seguro realizar operaciones DOM, como agregar y eliminar nodos en esta función. Las opciones de compilación y enlace son mutuamente excluyentes. Si estas dos opciones se establecen al mismo tiempo, la función devuelta por compilación se considerará como una función de enlace, y la opción de enlace en sí se ignorará. La función de traducción es responsable de convertir la plantilla DOM. La función de enlace es responsable de vincular el alcance y el DOM. El DOM se puede operar manualmente antes de que el alcance esté vinculado al DOM. En la práctica, este tipo de operación es muy raro al escribir instrucciones personalizadas, pero hay varias instrucciones incorporadas que proporcionan dicha funcionalidad. La función de enlace es opcional. Si se define una función compilada, devuelve la función vinculada, por lo que cuando se definen ambas funciones, la función compilada sobrecarga la función vinculada. Si nuestras instrucciones son simples y no requieren configuraciones adicionales, podemos devolver una función de la función de fábrica (función de devolución de llamada) para reemplazar el objeto. Si esto se hace, esta función es la función de enlace.
Este artículo se reproduce http://blog.csdn.net/evankaka
Lo anterior es todo el contenido del uso de AngularJS: instrucción de directiva, espero que sea útil para el aprendizaje de todos.