Para las instrucciones, se pueden entender simplemente como funciones que se ejecutan en elementos DOM específicos, y las instrucciones pueden extender las funciones de este elemento.
Primero, echemos un vistazo a un ejemplo de parámetro completo y luego introduzcamos las funciones y usos de cada parámetro en detalle:
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function (scope, element, attrs, transclude, otherInjectable) {...}, controleras: string, request: string, link: function (scope, iElement, iAttrs) {...}, compile :/ return un objeto o función de conexión, como se muestra a continuación: function (telement, tattrs, transclude) {return {pre: function (scope, ielement, iattrs, {... {... {... {... Post: function (alcance, iElement, IATTRS, controlador) {...}} Función de retorno Postlink (...) {...}}};restringir [cadena]
Restringir es un parámetro opcional. Utilizado para especificar en forma de instrucción que se declara en el DOM. El valor predeterminado es A, es decir, se declara en forma de atributo.
Los valores opcionales son los siguientes:
E (elemento)
<my-directive> </directive>
A (propiedad, valor predeterminado)
<div my-darirective = "expresión"> </div>
C (nombre de clase)
<div> </div>
M (nota)
<-Directiva: Expresión directa->
En general, considerando la compatibilidad del navegador, se recomienda encarecidamente que los atributos predeterminados se declaren inmediatamente en forma de atributos. Se recomienda el último método para no usar el índice de calificación cuando no es necesario.
Código:
angular.module ('app', []) .directive ('myDirective', function () {return {restrict: 'e', plantlate: '<a href = "http://www.baidu.com"> baidu </a>'};}) htmlcode: <hyirective> </directive>Efecto:
prioridad [int]
La mayoría de las instrucciones ignoran este parámetro y usan el valor predeterminado 0, pero algunos escenarios son muy importantes o incluso necesarios para establecer una alta prioridad. Por ejemplo, Ngrepeat establece este parámetro en 1000, para que pueda asegurarse de que en el mismo elemento siempre se llame antes de otras instrucciones.
Terminal [bool]
Este parámetro se usa para dejar de ejecutar instrucciones en el elemento actual que tiene menor prioridad que esta instrucción. Sin embargo, las instrucciones con la misma prioridad que la instrucción actual aún se ejecutarán.
Por ejemplo: NGIF tiene una prioridad ligeramente mayor que NGVIEW (en realidad son parámetros terminales). Si el valor de expresión de NGIF es verdadero, NGVIEW se puede ejecutar normalmente, pero si el valor de la expresión de NGIF es falso, NGView no se ejecutará porque la prioridad de NGVIEW es baja.
plantilla [cadena o función]
El parámetro de la plantilla es opcional y debe establecerse en uno de los dos formularios siguientes:
Un pedazo de texto HTML;
Una función que puede aceptar dos parámetros, los parámetros son el telement y los tattrs, y devuelve una cadena que representa la plantilla. t en telement y tattrs significa plantilla, en relación con la instancia.
Primero, demostremos el segundo uso:
angular.module ('app', []) .Directive ('myDirective', function () {return {restrict: 'eac', plantlate: function (elem, attr) {return "<a href = '" + attr.value + "'>" + attr.text + "</a>";};})Htmlcode: (el efecto es el mismo que el anterior, no se realizará ninguna demostración)
<my-directive value = "http://www.baidu.com" text = "baidu"> </directive> <div my-directive value = "http://www.baidu.com" text = "Baidu"> </div>
TemplateUrl [cadena o función]
TemplateUrl es un parámetro opcional, que puede ser del siguiente tipo:
Una cadena que representa la ruta de un archivo HTML externo;
Una función que puede aceptar dos parámetros, los parámetros son TELEMEN y TATTRS, y devuelve una cadena con la ruta del archivo HTML externo.
De cualquier manera, la URL de la plantilla se pasará a través de la capa de seguridad incorporada de NG, especialmente $ GetTrustedResourceurl, que protege la plantilla de ser cargada por fuentes no confiables. Por defecto, al llamar a la Directiva, el archivo de plantilla HTML se solicitará a través de AJAX en segundo plano. Cargar grandes cantidades de plantillas ralentizará severamente la aplicación de un cliente. Para evitar la latencia, las plantillas HTML se pueden almacenar en caché antes de implementar la aplicación.
Código:
angular.module ('app', []) .directive ('myDirective', function () {return {restrict: 'aec', templateUrl: function (elem, attr) {return attr.value + ".html"; // Por supuesto aquí podemos especificar directamente la ruta, y podemos incluir expresiones en la plantilla}};})reemplazar [bool]
Reemplazar es un parámetro opcional. Si este parámetro está establecido, el valor debe ser verdadero porque el valor predeterminado es falso. El valor predeterminado significa que la plantilla se insertará en el elemento que llama a esta directiva como un elemento infantil.
Por ejemplo, en el valor predeterminado del ejemplo anterior, el código HTML generado es el siguiente:
<my-directive value = "http://www.baidu.com" text = "Baidu"> <a href = "http://www.baidu.com"> Baidu </a> </my-directive>
Si reemplazar = verdadero está configurado
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "Baidu"> Baidu </a>
Según mi observación, este efecto solo mostrará un efecto real cuando se restrinja = "E".
Después de introducir los parámetros de instrucción básica, están involucrados parámetros de alcance más importantes ...
Parámetro de alcance [bool u objeto]
El parámetro de alcance es opcional y se puede establecer en True o un objeto. El valor predeterminado es falso.
Si varias directivas sobre un elemento usan el alcance de aislamiento, solo una de ellas puede entrar en vigencia. Solo el elemento raíz en la plantilla de directiva puede obtener un nuevo alcance. Por lo tanto, el alcance se establece en verdadero de forma predeterminada para estos objetos. La función de la directiva incorporada Ng-Controller es heredar del alcance principal y crear un nuevo alcance infantil. Crea un nuevo alcance infantil heredado del alcance de los padres. La herencia aquí no se describirá en detalle, y es básicamente la misma que la herencia en los objetos orientados.
Primero, analicemos un código:
<div ng-app = "app" ng-init = "name = 'Grandfather'"> <div ng-init = "name = 'Padre'"> Primera generación: {{name}} <div ng-init = "name = 'son'" ng-concontroller = "somecontroller"> segunda generación: {{name}} <div ng-init = "name = '' '' '' '' 'Generation' {{name}} </div> </div> </div> </div> </div> </div>Descubrimos que la primera generación, inicializamos el nombre como el padre, pero la segunda generación y la tercera generación son en realidad el mismo alcance, por lo que su nombre es en realidad un objeto, por lo que el efecto de esto es el siguiente:
Primera generación: padre
Segunda generación: nieto
Tercera generación: nieto
Estamos modificando el código para aislar la tercera generación y luego verificar el efecto:
<div ng-app = "app" ng-init = "name = 'Grandfather'"> <div ng-init = "name = 'padre'"> Primera generación: {{name}} <div ng-init = "name = 'son'" ng-concontroller = "somecontroller"> Segunda generación: {{name}}}} <div ng-init = "name = '' '' '' '' '' '' ng-Controller = "SecondController"> Tercera generación: {{name}} </div> </div> </div> </div> </div> </div> Angular.module ('app', []) .Controller ('somecontroller', function ($ scope) {}) .controller ('SecondController', function ($ scope) {})Los efectos son los siguientes:
Primera generación: padre
Segunda generación: hijo
Tercera generación: nieto
Después de modificar el código, echemos un vistazo a la herencia:
<div ng-app = "app" ng -init = "name = 'Grandfather'"> <iv> Primera generación: {{name}} <div ng-concontroller = "somecontroller"> segunda generación: {{name}} <diviv ng-controller = "segundo controller"> tercera generación: {{{name}} </diviv </div> </div> </div>Los efectos son los siguientes:
La primera generación: el beso del abuelo
La segunda generación: el beso del abuelo
La tercera generación: el beso del abuelo
Si desea crear una directiva que pueda heredar el alcance de un prototipo externo y establecer la propiedad del alcance en verdad, es simplemente un aislamiento heredable, es decir, no puede afectar reversamente el alcance principal.
Echemos un vistazo a otro ejemplo:
angular.module ('myApp', []) .Controller ('principalController', function ($ scope) {}) .Directive ('myDirective', function () {return {restrict: 'a', scope: false, // switch a {}, testionidad de verdad ng-model = "myProperty"/> </div> '};Código HTML:
<div ng-concontroller = 'principalController' ng-init = "myProperty = '¡Hello World!'"> External: {{myProperty}} <input ng-model = "myProperty"/> <div my-darrective> </div> </div> </div> </div>Cuando cambiemos el valor del alcance, encontraremos
falso: heredar pero no aislar
Verdadero: heredar y aislar
{}: Aislado y no heredado
trasladar
Transclude es un parámetro opcional. El valor predeterminado es falso. La incrustación a menudo se usa para crear componentes reutilizables, un ejemplo típico es un cuadro de diálogo modal o una barra de navegación. Podemos pasar toda la plantilla completa, incluidas las instrucciones en ella, en una instrucción incrustándola. El interior de la directiva puede acceder al alcance de la directiva externa, y la plantilla también puede acceder a los objetos de alcance externo. Para pasar el alcance, el valor del parámetro de alcance debe establecerse para aislar el alcance por {} o verdadero. Si no se establece el parámetro de alcance, el alcance dentro de la directiva se establecerá en el alcance de la plantilla entrante.
Use Transclude: True solo si desea crear una directiva que pueda contener cualquier contenido.
Veamos dos ejemplos: barra de navegación:
<Div Side-Box> <iv> <a href = ""> gráficos </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> front-end </a> <a href = ""> startup </a> </div> </iv>
JSCODE:
angular.module ('myApp', []) .Directive ('sidebox', function () {return {restrict: 'ea', scope: {title: '@'}, traduce: true, template: '<div> <div> <h2>' + '{{title}} </h2> <span ng transclude> </sange> </div> </divil> </divits>'; });Este código le dice al compilador NG que ponga lo que obtiene del elemento DOM donde descubre la Directiva Ng-Transclude.
Veamos un ejemplo del sitio web oficial:
angular.module ('DocSisOfNbIndexample', []) .Controller ('Controller', ['$ Scope', '$ TimeOut', function ($ Scope, $ TimeOut) {$ scope.name = 'tobias'; $ scope.hidialog = function () falso;my-dialog-close.html
my-dialog-cloose.html <div> <a href ng-reclick = "Close ()"> × </a> <div Ng-Transclude> </div> </div>
index.html
<div ng-confontroller = "controlador"> <my-dialog ng-hide = "dialogishidden" on-close = "hidedialog ()"> ¡Vea el contenido, {{name}}! </dialog> </div>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.
controlador [cadena o función]
El parámetro del controlador puede ser una cadena o una función. Cuando se establece en una cadena, el constructor del controlador registrado en la aplicación se encontrará con el valor de la cadena como nombre.
angular.module ('myApp', []) .Directive ('myDirective', function () {restringir: 'a', controlador: 'somecontroller'})Un controlador en línea se puede definir a través de un constructor anónimo dentro de la instrucción.
angular.module ('myApp', []) .Directive ('myDirective', function () {restrict: 'a', controlador: function ($ scope, $ element, $ attrs, $ transclude) {// La lógica del controlador se coloca aquí}});Podemos inyectar cualquier servicio NG que pueda inyectarse en el controlador y podemos usarlo en las instrucciones. También hay algunos servicios especiales en el controlador que se pueden inyectar en las instrucciones. Estos servicios incluyen:
1. $ Alcance
El alcance actual asociado con el elemento directivo.
2. $ Elemento
El elemento correspondiente a la instrucción actual.
3. $ ATTRS
Un objeto compuesto por atributos del elemento actual.
<div id = "adiv" class = "box"> </div> tiene el siguiente objeto de atributo: {id: "adiv", class: "box"}4. $ Transclude
La función de enlace de incrustación se prebinará con el alcance de incrustación correspondiente. La función de enlace Transclude es una función que realmente se ejecuta en elementos clonados y opera el DOM.
angular.module ('myApp', []) .Directive ('mylink', function () {return {restrict: 'ea', transclude: true, controler: function ($ scope, $ element, $ attrs, $ transclude) {$ transclude (function (clone) {var a = angular.emular ('<a>'); a.attr ('href', $ atts.); a.text (clone.text ()); }) ;;html
<my-link value = "http://www.baidu.com"> Baidu </my-link>
<Div my-Link value = "http://www.google.com"> Google </div>
Se recomienda usar transcludeFn solo en parámetros de compilación. La función de enlace puede aislar las instrucciones entre sí, mientras que el controlador define el comportamiento reutilizable. Si queremos exponer la API de la instrucción actual a otras instrucciones, podemos usar el parámetro del controlador, de lo contrario podemos usar el enlace para construir la funcionalidad del elemento de instrucción actual (es decir, funciones internas). Si usamos alcance. $ Watch () o queremos interactuar con los elementos DOM en tiempo real, usar enlaces será una mejor opción. Con la incrustación, el alcance reflejado por el alcance en el controlador puede ser diferente de lo que esperábamos. En este caso, no se puede garantizar que el objeto $ alcance se actualice normalmente. Cuando desee interactuar con el alcance en la pantalla actual, puede usar el parámetro de alcance que se pasa a la función de enlace.
Controlleras [cadena]
El parámetro Controlleras se usa para establecer el alias del controlador para que el controlador pueda ser referenciado en la vista sin siquiera inyectar $ alcance.
<div ng-concontroller = "principalController como main"> <input type = "text" ng-model = "main.name"/> <span> {{main.name}} </span> </div>JSCODE:
angular.module ('myApp', []) .Controller ('principalController', function () {this.name = "halower";});El alias del controlador permite el enrutamiento y las instrucciones para crear controladores anónimos. Esta capacidad puede crear objetos dinámicos en controladores, y el objeto está aislado y fácil de probar.
requiere [cadena o cadena []]
Requerir una cadena que representa el nombre de otra instrucción. Requerir inyectará el controlador en la instrucción que especifica y servirá como el cuarto parámetro de la función de enlace de la instrucción actual. El valor de una cadena o elemento de matriz es el nombre de instrucción que se utilizará en el alcance de la instrucción actual. En cualquier caso, el compilador NG se referirá a la plantilla de la instrucción actual cuando busque un subcontrollador.
compilar 【objeto o función】
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. Normalmente, 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 compilada 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.
enlace
compilar: function (tele, tattrs, traduceFn) {// toDo: return function (scope, ele, attrs) {// enlace function};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.
ngmodelo
Proporciona una API más subyacente para procesar datos en el controlador. Esta API se utiliza para manejar la vinculación de datos, la verificación, la actualización de CSS y otras cosas que en realidad no operan el DOM. El controlador NGModel se inyectará en las instrucciones junto con el NGModel, que contiene algunos métodos. Para acceder al NGModelController, debe usar la configuración de Requerir.
Los elementos comunes utilizados por NGModelController son los siguientes:
1. Para establecer el valor de vista en el alcance, se debe llamar a la función ngmodel. $ SetViewValue ().
El método $ setViewValue () es adecuado para escuchar eventos personalizados en directivas personalizadas (como usar un complemento jQuery con funciones de devolución de llamada), y nos gustaría establecer $ ViewValue y ejecutar bucles Digest cuando se llame la devolución de llamada.
angular.module ('myApp') .Directive ('myDirective', function () {return {request: '? ngmodel', link: function (scope, ele, attrs, ngmodel) {if (! ngmodel) return; $ (function () {ele.datepicker ({// calleting function onselect: function (date (date) Alcance. $ Aplicar (Funcion () {Ngmodel. }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. El método $ render puede definir el método de renderizado específico de la vista
3. Propiedades
1. $ ViewValue
La propiedad $ ViewValue contiene la cadena real requerida para actualizar la vista.
2. $ ModelValue
$ ModelValue está en manos del modelo de datos. $ ModelValue y $ ViewValue pueden ser diferentes dependiendo de si la tubería de $ Parser opera en él.
3. $ PARSERS
El valor de $ analizadores es una variedad de funciones, donde las funciones se denominan una por una en forma de tuberías. ngmodel El valor leído del DOM se pasa a la función en $ analizadores y es procesado por el analizador en secuencia.
4. $ Formatters
El valor de $ Formatters es una variedad de funciones que se denominan una por una en forma de tuberías cuando cambia el valor del modelo de datos. No tiene ningún efecto en la tubería de $ analizador y se utiliza para formatear y convertir valores para mostrar en controles con este valor unido.
5. $ ViewChangeListeners
El valor de $ ViewChangeListeners es una variedad de funciones que se denominan una por una en forma de tuberías cuando cambia el valor en la vista. Con $ ViewChangeListeners, se puede lograr un comportamiento similar sin usar $ Watch. Dado que se ignora el valor de retorno, estas funciones no necesitan devolver los valores.
6. $ error
El objeto de error $ contiene el nombre del validador que no ha pasado la verificación y la información de error correspondiente.
7. $ Pristine
El valor de $ Pristine es booleano, lo que puede decirnos si el usuario ha modificado el control.
8. $ Dirty
El valor de $ Dirty es lo contrario de $ Pristine, lo que puede decirnos si el usuario ha interactuado con el control.
9. $ válido
El valor $ válido nos dice si hay errores en el control actual. El valor es falso cuando hay un error, y el valor es verdadero cuando no hay error.
10. $ inválido
El valor $ inválido nos dice si hay al menos un error en el control actual, y su valor es lo contrario de $ válido.
Lo anterior es la compilación de las instrucciones y los materiales de conocimiento sobre Angularjs. Continuaremos agregándolos más tarde. ¡Gracias por su apoyo para este sitio!