Pontos -chave para aprender
• Por que usar comandos
• Crie diretivas personalizadas
• Trabalhe com JQLite
1. Por que usar comandos personalizados
O NG possui muitas diretivas personalizadas incorporadas, mas às vezes não atendem aos seus requisitos, o que exige que criemos propriedades personalizadas.
2. Comandos personalizados
Em seguida, vamos fazer um pequeno caso. Quando o mouse clicar para aumentar o preço, os itens da lista aumentarão automaticamente. Obviamente, a lista também é adicionada automaticamente por meio de instruções. É uma div vazia
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type = "text/css" href = "css/bootstrap-theme.min.css"> </ad Head> <body> <dlv ng-controller = "defaultctrl"> <div> <h3> produtos </h3> </div = <div> <!-clique para aumentar o preço e o preço "> Aumente </botão> </div> <div> <!-Exiba os dados dos produtos em uma lista não ordenada-> <!-list-property = "Price | moeda" Unidades de itens de lista localizadas-> <div unorderList = "Produtos" List-Property = "Preço | src="js/angular.min.js"></script><script type="text/javascript">angular.module("exampleApp", []) .directive("unorderlist", function () { // scope scope// element Apply the element of the directive // attrs Use the attributes of the element of the directive return function (scope, element, attrs) { // Attrs ['UNODERLIST'] Obtenha o valor do atributo não -encaminhamento, aqui está os produtos // obtendo o valor do modelo de dados, aqui está o escopo Element.Append (UL); <li> elemento de tag var = angular.Element ("<li>"); (NewValue, OldValue) {// Atualize o valor de li.text (newValue); }, {nome: "bananas", categoria: "fruta", preço: 2,42, expiração: 7}, {name: "peras", categoria: "fruta", preço: 2.02, expiração: 6}]; $ scope.products [i] .price ++;Análise:
Etapa 1: Crie um controlador, adicione produtos de modelos de dados e método increment ()
Etapa 2: Personalize a tag UNODERLIST. A função desta tag é: exiba seu valor em uma lista não ordenada através do modelo de dados escopo.
Parte 3: e quando o botão de marcação é clicado, os valores da lista não ordenada aumentarão na sequência
3. Trabalhe com JQLite
Ng tem jqlite embutido, que é uma versão menor do jQuery
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angluar test</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></head><body> <dlv> <!-- Use custom directive--> <ol domestic-directive> <li>Apples</li> <ul> <li>Bananas</li> <li>Cherries</li> <li>Oranges</li> </ul> <li>Pears</li> <li> Laranjas </li> </ol> </dlv> <script type = "text/javascript" src = "js/angular.min.js"> </script> <script type = "text/javasscript"> angular.module ("Exameppp (função). // Encontre todo o elemento LIS, aqui o elemento é o chamador <ol> var itens = elemento.find ("li"); (Items.eq (i) .text () == "laranjas") {items.eq (i) .css ("color", "vermelho"); items.css ("color"));Análise:
Etapa 1: personalize o controlador e defina os nomes dos modelos de dados
Etapa 2: Personalize o comando, a função é descobrir todas as LIs sob os elementos usados pelo comando e atribuir valores diferentes a diferentes cores da fonte.
Etapa 3: Ligue e use instruções na visualização
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.