Puntos clave para el aprendizaje
• Por qué usar comandos
• Crear directivas personalizadas
• Trabajar con JQLite
1. Por qué usar comandos personalizados
Ng tiene muchas directivas personalizadas integradas, pero a veces no cumplen con sus requisitos, lo que requiere que creemos propiedades personalizadas.
2. Comandos personalizados
A continuación, hagamos un caso pequeño. Cuando el mouse hace clic para aumentar el precio, los elementos de la lista aumentarán automáticamente. Por supuesto, la lista también se agrega automáticamente a través de instrucciones. Es un div vacío
<! DOCTYPE> <!-Use Module-> <html ng-app = "examinepp"> <head> <title> Angluar test </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.csss"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv ng-controller = "defaultctrl"> <div> <h3> productos </h3> </div> <div>!-Haga clic para aumentar el precio y el precio aumenta-<botón tipo = "botón" ng-click " Aumente </botón> </div> <div> <!-Mostrar datos de productos en una lista no ordenada-> <!-List-Property = "Price | Moneda" Unidades de elemento de lista Localizadas-> <div unordenList = "Productos" List-Property = "Price | Moneda"> </div> </div> </div> </dlv> <scrivit type = "text/javascript" "" src = "js/angular.min.js"> </script> <script type = "text/javascript"> angular.module ("exampeppp", []) .directive ("unorderList", function () {// scope scope // elemento aplicar el elemento de la directiva // ATTRS usa los atributos del elemento del elemento de la función de retorno (Scope, el elemento) ATRESS ['UnderList'] Obtenga el valor del atributo underList, aquí está los productos // Obtener el valor del modelo de datos, aquí está Scope.products var data = enriqueciendo [attrs ['underList']]]; elemento.append (UL); Crear un elemento de etiqueta var li = angular.element ("<li>"); Scope. $ Watch (WatcherFn, Function (NewValue, OldValue) {// Actualizar el valor de Li.Text (NewValue);})}) (i); "Fruit", Precio: 1.20, Expiry: 10}, {nombre: "Bananas", categoría: "Fruit", Price: 2.42, Expiry: 7}, {nombre: "peras", categoría: "fruta", precio: 2.02, expiry: 6}]; $ scope.products.length;Análisis:
Paso 1: Cree un controlador, agregue productos del modelo de datos y el método IncrementPrices ()
Paso 2: Personalice la etiqueta UnderList. La función de esta etiqueta es: mostrar su valor en una lista desordenada a través del modelo de datos alcanzados.
Parte 3: y cuando se hace clic en el botón de marcado, los valores de la lista desordenada aumentarán en secuencia
3. Trabaja con JQLite
Ng tiene JQLite incorporado, que es una versión más pequeña de jQuery
<! DOCTYPE> <!-Use Module-> <html ng-app = "examinepp"> <head> <title> Angluar test </title> <meta charset = "utf-8"/> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.min.csss"> <link rel = "stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> </head> <body> <dlv> <!-use directive personalizado-> <ol domesticante> <li> manzanas </li> <ul> <li> plátanos </li> <li> CHERRIES </li> <li> oranges </li> </li> <li> <li> Oranges </li> </ol> </dlv> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javaScript"> angular.module ("examenpp", []. El elemento LIS bajo el elemento, aquí el elemento es la persona que llama <ol> var elementos = elemento.find ("li"); (items.eq (i) .Text () == "oranges") {items.eq (i) .css ("color", "rojo"); items.css ("color"));Análisis:
Paso 1: Personalice el controlador y defina los nombres de los modelos de datos
Paso 2: Personalizar el comando, la función es encontrar todos los LIS debajo de los elementos utilizados por el comando y asignar diferentes valores a diferentes colores de la fuente.
Paso 3: Llame y use instrucciones en la vista
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.