Cuando se trata de AngularJS, lo primero que pensamos es probablemente el sistema de enlace de datos e instrucciones de dos vías, que también son los aspectos más atractivos de AngularJS. En cuanto a la unión de datos bidireccionales, creo que no hay nada que decir. Así que hoy discutiremos brevemente el sistema de instrucciones del marco AngularJS. También soy un principiante y he consultado información. Si hay algunas cosas malas, Wan Wang lo señaló.
Las directivas son la parte más importante de AngularJS, por lo que este marco en sí viene con más instrucciones, pero en el desarrollo, estas instrucciones generalmente no pueden satisfacer nuestras necesidades, por lo que también necesitamos personalizar algunas instrucciones. Entonces, una directiva AngularJS puede tener cuatro formas de expresión en el código HTML:
1. Use como un nuevo elemento HTML.
<Hello> </loule> o <hello/>
2. Use como un atributo de un elemento
<Div Hello> </div>
3. Use como clase de elemento
<div> </div>
4. Use como comentarios
<!-Directiva: Hola->
Tenga en cuenta que hay una trampa aquí, que es tener un espacio después de la "Directiva: hola", de lo contrario será inútil. Al mismo tiempo, se recomienda utilizar menos métodos de anotación. Si tiene que buscar alta calidad, entonces sea informal. Dado que las instrucciones tienen las cuatro formas de expresión anteriores, ¿cómo las definen específicamente?
.Directive ('hello', function () {return {restrict: 'aecm', plantplate: '<boton> haga clic en mí </boton>'}})Lo anterior es el código más simple para definir una directiva, sin duda al respecto. En el código anterior, el método Directive () define una nueva instrucción. El método tiene dos parámetros. El primer 'hola' es especificar que el nombre de la instrucción es hola, y el segundo parámetro es la función que devuelve el objeto de instrucción. Entonces, en el código anterior, la función utiliza principalmente dos propiedades para definir esta directiva de hola:
1. El atributo restringir [cadena] se usa principalmente para especificar qué forma de expresiones se puede usar en el código HTML. A representa atributos, E representa elementos, C representa clases y M representa comentarios. En situaciones reales, generalmente usamos los dos métodos de AE.
2. El atributo de plantilla [cadena o función] especifica el marcado HTML generado por el comando después de que sea compilada y vinculada por Angular. Este atributo puede ser tan simple como solo un texto HTML en el interior, o puede ser particularmente complejo. Cuando el valor del atributo es función, el método devuelve una cadena que representa la plantilla, y la expresión {{}} también se puede usar en ella.
Template: function () {return '<boton> haga clic en mí </boton>'; }Pero en general, el atributo de plantilla será reemplazado por TemplateURL, y se utiliza para señalar una dirección de archivo externa, por lo que generalmente colocamos la plantilla en un archivo HTML externo y luego usamos TemplateURL para señalarlo.
Al definir instrucciones, además de los dos atributos más básicos anteriores, también usaremos muchos otros atributos. Así que hablemos de ellos uno por uno:
1. Atributo de prioridad [número], este atributo se utiliza para especificar la prioridad de las instrucciones personalizadas. Cuando hay más de una instrucción en un elemento DOM, debe comparar la prioridad de las instrucciones. Las instrucciones con mayor prioridad se ejecutan primero. Esta prioridad se usa para ordenar la función de compilación antes de ejecutar la instrucción. Entonces hablaremos sobre la función de compilación cuidadosamente a continuación.
2. Atributo terminal [booleano], este parámetro se usa para definir si detener las instrucciones en el elemento actual que tiene menor prioridad que esta instrucción. Si el valor es verdadero, es normal. Se ejecuta en el orden de prioridad. Si se establece en False, no se ejecutarán instrucciones en el elemento actual que tenga menor prioridad que esta instrucción.
3. Reemplace el atributo [booleano], este atributo se usa para especificar si el contenido HTML generado reemplazará el elemento HTML que define esta directiva. Cuando establezcamos el valor de esta propiedad en verdadero, abrimos la consola y la miramos, encontrará que el elemento generado por esta instrucción se verá así:
Cuando nos configuramos en falso, se verá así:
.
4. Atributo de enlace [función]. En el ejemplo anterior, el comando que personalizamos en realidad no tiene mucho significado. Este es solo el comando más simple. Hay muchos atributos que no hemos definido para ello, por lo que no es de gran uso. Por ejemplo, esta función de enlace incluye tres parámetros: alcance, elemento y attrs. Esta función de enlace se usa principalmente para agregar el monitoreo de eventos a los elementos DOM, monitorear los cambios en los atributos del modelo y actualizar DOM. Tiene tres parámetros:
1: Parámetro de alcance. Cuando no definimos los atributos de alcance para la instrucción, representa el alcance del controlador principal.
2: El parámetro del elemento es el Jqlite (un subconjunto de jQuery) de la instrucción para envolver el elemento DOM. Si introdujo jQuery antes de introducir AngularJS, entonces este elemento es el elemento jQuery, no el elemento jqlite. Dado que este elemento ha sido envuelto por JQuery/JQLite, ya no necesitamos usar $ () para envolverlo al realizar operaciones DOM.
Tres: El parámetro ATTRS, que contiene el objeto de parámetro estandarizado de los atributos del elemento donde se encuentra la directiva.
5. El atributo de alcance [booleano u objeto] se usa para definir el alcance de la instrucción. Es falso de forma predeterminada. Es decir, la instrucción hereda el alcance del controlador principal. Puede usar los atributos en el alcance del controlador principal a voluntad, pero de esta manera, contaminará los atributos en el alcance principal, que no es aconsejable. Entonces podemos dejar que el alcance tome los siguientes dos valores: True y {}.
Cuando es cierto, significa que Angular crea un alcance heredado del alcance principal para la instrucción.
var myApp = angular.module ('myApp', []) .controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'rojo';}]) .directive ('hello', function () {return {restrict: 'aecm', reemplazar: triudad style = "Background-Color: {{Color}}"> Haga clic en mí </boton> ', Scope: True, Link: function (Scope, Elements, Attrs) {Elements.bind (' Click ', function () {Elements.css (' Color de fondo ',' azul ');})}}}})Aquí definimos un atributo de color para el alcance principal y lo asignamos a rojo. En el atributo de alcance de la Directiva Hello, damos verdadero, por lo que Angular crea un alcance heredado del alcance principal para esta directiva. Luego, en el atributo de plantilla, usamos {{}} para usar el atributo de color heredado del alcance principal, por lo que el botón estará rojo.
Cuando {}, significa que se crea un alcance aislado y las propiedades del alcance principal no se heredarán. Pero a veces también necesitamos acceder a las propiedades o métodos en el alcance principal, entonces, ¿qué debemos hacer? Angular ha pensado durante mucho tiempo en esto para nosotros. Hay tres formas de recordar las operaciones anteriores:
1: Use @ para implementar un enlace unidireccional. Si solo le damos al alcance este valor {}, entonces el color de fondo del botón en el código anterior será gris. , y si necesitamos usar el atributo de color del alcance principal, podemos escribir esto:
alcance {color: '@color'} <hello color = "{{color}}"> </sole>Hay dos puntos a tener en cuenta aquí: 1. El color de la propiedad en el alcance representa el color en la expresión {{}}, y los dos deben ser consistentes. 2. El valor del color del atributo en el alcance, es decir, el color después de @, representa el color del atributo en el elemento HTML a continuación, por lo que los dos también deben ser consistentes. Si el nombre del atributo aquí es el mismo que el nombre utilizado en la expresión {{}} en la plantilla, el nombre del atributo después de @ se puede omitir y escribir en la siguiente forma.
alcance {color: '@'}Desde el valor del alcance en la instrucción, se puede ver que el color en la expresión {{}} en la plantilla de instrucción apunta al atributo de color del elemento actual, y el valor de este atributo de color es el valor del color de propiedad del alcance principal. El alcance principal pasa su valor de atributo de color al atributo de color del elemento actual, y luego el atributo de color pasa el valor al color en la expresión en la plantilla. Este proceso es unidireccional.
Dos: use = para implementar la vinculación bidireccional
.Directive ('hello', function () {return {restrict: 'aecm', reemplazar: true, plantlate: '<button style = "de fondo de fondo: {{color}}"> Haga clic en mí </botón>', margen: {color: '='}, enlace: function (alcance, elementos, attrs) {elements.bind ('click', function () Elements.css ('Color de fondo', 'Blue');<hello color = "color"> </sole> <input type = "text" ng-model = "color"/>
Aquí tenemos un enlace de dos vías el atributo de color en el alcance de la instrucción y el atributo de color en el alcance principal, y agregue un evento de clic a la función de enlace de la instrucción. Al hacer clic en el botón, cambiará el color del botón y cambiará el valor del atributo de color del alcance de instrucciones, y luego agregará una etiqueta de entrada a la página HTML, salida o entrada el valor del atributo de color del alcance principal. Hay un lugar para tener en cuenta aquí: el valor del nombre del atributo del elemento actual no necesita agregar la expresión {{}}, porque el alcance principal aquí pasa un modelo de datos de alcance real, no una cadena simple, por lo que podemos pasar cadenas simples, matrices e incluso objetos complejos al alcance de la instrucción. Ahora veamos qué sucede al hacer clic en este botón.
Aquí podemos ver que el color del botón ha cambiado a rosa, lo que significa que el clic cambia el atributo de color del alcance del comando, lo que hace que cambie el color del botón. Pero aquí no es solo el botón que ha cambiado. Preste atención al valor en el formulario de entrada también se ha vuelto rosa, lo que significa que el atributo de color del alcance principal también ha cambiado. Además, ingresemos un color en la entrada para ver qué cambios han ocurrido.
, se puede ver que cuando entramos en otro color en la forma, el color del botón también cambia, lo que significa que el atributo de color del alcance del comando se ha cambiado. En resumen, podemos encontrar que usar '=' es un enlace de dos vías.
Tres: use y llame al método en el alcance principal
var myApp = angular.module ('myApp', []) .controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'rojo'; $ scope.sayhello = function () {alert ('hola');};}]) .Directive ('hello', function () {retorno restringido template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>', scope:{ color:'=', sayhello:'&' }, link: function (scope,elements,attrs) { elements.bind('click', function () { elements.css('background-color','blue'); alcance. $ Aplicar (function () {scope.color = 'Pink';})})}}})<hello color = "color" sayshello = "sayhello ()"> </hello> <input type = "text" ng-model = "color"/>
Aquí también tenemos dos cosas que tener en cuenta: 1. No solo necesitamos usar la Directiva Ng-Click en la plantilla para vincular el método en el alcance principal a llamar, sino que también agregar una propiedad al elemento actual, y esta propiedad apunta al método del alcance principal a llamar. 2. Los tres atributos del alcance de la instrucción Sayshello, el atributo de elemento actual Sayshello y el nombre del método del evento que une la plantilla debe ser consistente. Luego podemos hacer clic en el botón y aparece un cuadro de diálogo.
6. Transcluya el atributo [boolean], este atributo se usa para permitirnos especificar si la directiva puede contener algún contenido
.Directive ('hello', function () {return {restrict: 'aecm', reemplazar: true, transclude: true, scope: {}, plantlate: '<div ng ng-transclude> </div>',}}) <Hello> Hola <span> {{color}} </span> </ello>Cuando su valor es verdadero, esta es la salida de valor en la página. Cuando falsa, la página estará en blanco. Hay un lugar al que prestar atención aquí, que es <span> {{color}} </span>. El color aquí es el color en el alcance principal. No es el atributo de color del alcance en la directiva.
7. Compilar el parámetro [función]. Este método tiene dos elementos de parámetros, attrs. El primer elemento de parámetro se refiere al elemento donde se encuentra la instrucción, y los segundos attros se refieren a la lista estandarizada de parámetros asignados en el elemento. Aquí también tenemos un lugar para tener en cuenta: la función de compilación no puede acceder al alcance y debe devolver una función de enlace. Sin embargo, si la función de compilación no está configurada, puede configurar la función de enlace normalmente (con compilar, no puede usar el enlace, la función de enlace se devuelve por compilación).
.directive ('hello', function () {return {restrict: 'aecm', reemplazar: true, traduce: true, plantlate: '<button ng-click = "sayhello ()" style = "de color: {{color}}"> Haga clic en Me </botte>, alcance: {color:' = ', sayhello:' & '}, Compilation (Compilio (Elemento, atts) (Alcance, Elementos, ATTRS) {Elements.bind ('Click', function () {Elements.css ('Background-Color', 'Blue'); Scope. $ Aplicar (function () {Scope.color = 'Pink';})})};Ahora hagamos clic en este botón
Descubrimos que lo que sucedió después de hacer clic en el botón aquí es el mismo que usó el atributo de enlace antes, y en realidad no hay mucha diferencia.
De hecho, en la mayoría de los casos, solo necesitamos usar la función de enlace. Esto se debe a que la mayoría de las instrucciones solo necesitan considerar registrar la escucha de eventos, el modelo de monitoreo y la actualización de DOM, que se puede hacer en las funciones de enlace. Sin embargo, para instrucciones como Ng-Repeat, los elementos DOM deben clonarse y repetirse varias veces, y la función de compilación se realiza antes de ejecutar la función de enlace. Entonces, ¿por qué necesitamos dos funciones separadas para completar el proceso de generación y por qué no podemos usar una? Para responder bien a esta pregunta, ¡debemos entender cómo se compilan las directivas en Angular!
8. ¿Cómo se compilan las instrucciones?
Cuando se inicia nuestro arranque de la aplicación Angular, Angular usará el servicio de compilar $ para atravesar el elemento DOM. Después de reconocer todas las instrucciones, se llamará al método de compilación de la instrucción, se devolverá una función de enlace y luego la función de enlace se agregará a la lista de funciones de enlace ejecutadas más adelante. Este proceso se llama la etapa de compilación. Las instrucciones como Ng-Repeat deben repetirse y clonarse muchas veces. La función de compilación se ejecuta solo una vez durante la etapa de compilación y estas plantillas se copian, pero la función de enlace se ejecuta para cada instancia copiada. Por lo tanto, podemos manejarlo por separado para mejorar nuestro rendimiento (esta oración es un poco poco realista, lo copié de otros lugares.
9. Controlador [cadena o función] y requiere parámetros [String o String []]. Cuando queremos permitir que otras instrucciones interactúen con sus instrucciones, necesitamos usar la función del controlador. Cuando otra directiva quiere interactuar, necesita declarar su referencia a la instancia del controlador de su directiva.
.directive('hello', function () { return{ scope:{}, require:'^he', compile: function (element,attrs) { return function (scope,elements,attrs,cntIns) { cntIns.fn() }; } } }) .directive('he', function () { return { restrict:'AE', scope:{}, controller: function ($ alcance, $ compilar, $ http) {this.fn = function () {alerta ('hello');<He> <Hello Color = "Color" Sayshello = "Sayhello ()"> </ello> </He>
Cuando la página se carga, aparecerá un cuadro de diálogo.
Bueno, lo anterior es lo que aprendí sobre las instrucciones que he aprendido durante este período de tiempo. Vamos a escribir este.
El análisis exhaustivo de las instrucciones en AngularJS (debe leer) es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.