Diretiva em angularJS e a lista de diretivas
Como abordamos, o angularJS é conhecido como um framework usado para construir aplicações web, ou seja, provido de uma série de estruturas pré-construídas que nos ajudam a desenvolver aplicações de forma fácil e coerente.mais.Directives é um dos componentes mais importantes do angularJS, ajudando-nos a herdar elementos HTML básicos, tornando os modelos de interface html reutilizáveis, fáceis de testar.
Mục lục
Conceitos de Diretivas AngularJS
As diretivas (diretivas) são um comportamento que será acionado quando uma construção específica for encontrada durante a compilação do AngularJS. Leia mais sobre o compilador HTML angularJS aqui: https://docs.angularjs.org/guide/compiler
O exemplo a seguir demonstra 2 maneiras de usar a diretiva ng-bind via atributo ou classe:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" ng-change="change()" /> <span class="ng-bind: name;"></span> </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; $scope.length = 0; }); </script> </html>As diretivas embutidas geralmente são estruturadas como um atributo do HTML, (que pode ser escrito em classe ou estilo de tag), o angular reconhece esses atributos especiais e podemos imaginá-lo dando display ao usar esses atributos, por isso é necessário estar em conformidade com o próprio Angular características e seu princípio de que a letra inicial é sempre o caractere ng, seguindo a estrutura de exemplo ng-directivename, em que Directivename é o nome da diretiva que usamos. Como nos exemplos anteriores, para inicializar o aplicativo, para declará-lo como um controlador de diretiva, declaramos ng-controller, declaramos um modelo de diretiva, declaramos ng-model ou deixamos a vinculação de dados, usamos ng-bind …
Algumas notas:
- ng-app deve sempre ser definido e, para versões posteriores, deve sempre nomear ng-app e declará-lo explicitamente.
- Na estrutura html, sempre há apenas 1 ng-app, pode haver muitas outras diretivas ng.
- Documentação da lista de diretivas: https://docs.angularjs.org/api/ng/directive
Diretivas de correspondência (diretivas de correspondência)
Lista de diretivas AngularJS populares
ng-app
Documentos: https://docs.angularjs.org/api/ng/directive/ngApp
Quando declaramos uma diretiva ng-app, o AngularJS entenderá que ao iniciar uma aplicação Angular, ele definirá isso como o elemento raiz e em seguida inicializará os parâmetros de configuração internos que chamamos de bootstraps. Além disso, ng-app também é usado para descrever vários módulos no aplicativo. Quanto ao exemplo, já temos muitas demos, então não vou falar mais sobre isso.
ng-init
Documentos: https://docs.angularjs.org/api/ng/directive/ngInit
ng-model
Documentos: https://docs.angularjs.org/api/ng/directive/ngModel
Use a diretiva ng-model usada para vincular (vincular) dados dentro de tags de entrada de formulário como input, select, textarea às propriedades da variável $scope na camada do controlador.
As diretivas ng-model fornecem alguns dos seguintes recursos:
- Fornece validação de tipos de dados para o aplicativo (número, e-mail, obrigatório)
- Fornece status para dados do aplicativo (inválido, sujo, toque, erro)
- Forneça a classe css para o elemento HTML (será discutido no formulário de pós-validação)
- Vincular os dados de um elemento a formulários HTML
ng-repetir
Documentos: https://docs.angularjs.org/api/ng/directive/ngRepeat
Use a diretiva ng-repeat para poder percorrer elementos HTML quando você tem um modelo de lista, seja array ou objeto, essas são diretivas muito úteis e usadas com frequência que suportam tags de iteração diretamente em HTML, o que o javascript puro não pode fazer.
Exemplo de ng-repeat
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ng-repeat</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mainController"> <table> <thead> <tr> <th>Name</th> <th>Country</th> </tr> </thead> <tbody> <tr ng-repeat="item in names"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </tbody> </table> <ul> <li ng-repeat="item in listnotes">{{item.id}} - {{item.title}} - {{item.content}}</li> </ul> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('mainController', function ($scope) { $scope.names = [ { name: 'Jani', country: 'Norway' }, { name: 'Hege', country: 'Sweden' }, { name: 'Kai', country: 'Denmark' } ]; $scope.listnotes = [ {'id': 1, 'title': 'Note 1', 'content': 'Content 1'}, {'id': 2, 'title': 'Note 2', 'content': 'Content 2'}, {'id': 3, 'title': 'Note 3', 'content': 'Content 3'} ] }); </script> </html>ng-hide / ng-show
Use ng-hide quando queremos ocultar o elemento HTML em uma condição específica, em contraste com ng-hide é ng-show, útil na situação de aplicativo SPA de rastreamento em várias etapas, por exemplo O exemplo abaixo é um caso de uso de ng-hide para criar uma pesquisa de coleta de dados do usuário em várias etapas:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ng-hide/ng-show example</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="surveyApp"> <div ng-controller="mainController"> <h1>Survey Form</h1> <form name="surveyForm" ng-submit="handleSubmit()"> <div ng-hide="step1"> <div> <label>What is your name ?</label> <input type="text" ng-model="user.name" required /> </div> <div> <label>How old are you ?</label> <input type="number" placeholder="" ng-model="user.age" required /> </div> <div> <label>Do you get married ?</label> <input type="radio" ng-model="user.married" value="yes" />Yes <input type="radio" ng-model="user.married" value="no" />No </div> <div> <label>What kind of job are you doing ?</label> <select ng-model="user.job"> <option value="developer">Developer</option> <option value="teacher">Teacher</option> <option value="businessconsult">Business Consultant</option> <option value="other">Other</option> </select> </div> <button type="button" data-step="1" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step2"> <div> <label>What is your favorite sports ?</label> <input type="text" ng-model="interest.sports" required /> </div> <div> <label>What is your favorite music ?</label> <input type="text" ng-model="interest.music" required /> </div> <div> <label>What is your favorite movies ?</label> <input type="text" ng-model="interest.movies" required /> </div> <div> <label>What is your favorite books ?</label> <input type="text" ng-model="interest.books" required /> </div> <div> <label>What is your favorite games ?</label> <input type="text" ng-model="interest.games" required /> </div> <button type="button" data-step="2" ng-click="prevstep($event)">Previous step</button> <button type="button" data-step="2" ng-click="nextstep($event)">Next step</button> </div> <div ng-hide="step3"> <div> <label>Please provide your salary ?</label> <input type="text" ng-model="finances.salary" required /> </div> <div> <label>Please provide your savings ?</label> <input type="text" ng-model="finances.savings" required /> </div> <div> <label>Please provide your investments ?</label> <input type="text" ng-model="finances.investments" required /> </div> <div> <label>Please provide your debt ?</label> <input type="text" ng-model="finances.debt" required /> </div> <button type="button" data-step="3" ng-click="prevstep($event)">Previous step</button> <button>submit form</button> </div> <div ng-hide="step4"> Thanks for your submission Let us show what you provide: <br /> Your name: {{user.name}} <br /> Your age: {{user.age}} <br /> Your job: {{user.job}} <br /> Your favorite sports: {{interest.sports}} <br /> Your favorite music: {{interest.music}} <br /> Your favorite movies: {{interest.movies}} <br /> Your favorite books: {{interest.books}} <br /> Your favorite games: {{interest.games}} <br /> Your salary: {{finances.salary}} <br /> Your savings: {{finances.savings}} <br /> Your investments: {{finances.investments}} <br /> Your debt: {{finances.debt}} <br /> Thanks for contact us ! </div> </form> </body> <script> var surveyApp = angular.module('surveyApp', []); surveyApp.controller('mainController', ($scope) => { $scope.step1 = false; $scope.step2 = true; $scope.step3 = true; $scope.step4 = true; $scope.user = { name: 'sdfsdf', age: '', married: 'no', job: 'developer', } $scope.interest = { sports: '', music: '', movies: '', books: '', games: '', } $scope.finances = { salary: 0, savings: 0, investments: 0, debt: 0, } $scope.prevstep = ($event) => { switch ($event.target.dataset.step) { default: case '2': $scope.step2 = true; $scope.step1 = false; break; case '3': $scope.step3 = true; $scope.step2 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.nextstep = ($event) => { switch ($event.target.dataset.step) { default: case '1': $scope.step1 = true; $scope.step2 = false; break; case '2': $scope.step2 = true; $scope.step3 = false; break; case '3': $scope.step3 = true; $scope.step4 = false; break; } if ($event.target.dataset.step == 1) { } else if ($event.target.dataset.step == 2) { } } $scope.handleSubmit = () => { // handle submit to send data to server or send email ... $scope.step3 = true; $scope.step4 = false; console.log($scope.user); console.log($scope.interest); console.log($scope.finances); } }); </script> </html>ng-incluir
Por padrão, o HTML não fornece uma solução para poder incorporar o conteúdo de uma página HTML em outra, mas com angularJS, esse problema é resolvido através da diretiva ng-include , podemos incorporar completamente uma página HTML diretamente. outro arquivo, útil quando a estrutura HTML é muito longa, podemos dividi-lo em arquivos menores para manter e atualizar facilmente o código de cada componente, minimizando os erros que surgem no processo de desenvolvimento.
Exemplo de ng-include, passando dados do controller para include file para percorrer o atributo onload, porém essa não é uma boa forma de usar, pois existe um problema com scoping, nesta situação devemos usar diretivas customizadas (diretiva self- definido) que será abordado a seguir.
Veja mais documentos:
Etapa 1: crie o arquivo index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ng-include</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="myController"> <h1>ng-include example</h1> <div ng-include="'table.html'" onload="items = items"></div> </div> </div> </body> <script> var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.items = [ {name: 'Jani', country: 'Norway'}, {name: 'Hege', country: 'Sweden'}, {name: 'Kai', country: 'Denmark'} ] }); </script> </html>Etapa 2: crie o arquivo table.html
<table> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.country}}</td> </tr> </table>Resultados após a impressão na tela
ng-form / ng-submit
Documentos: https://docs.angularjs.org/api/ng/directive/ngForm
Com a criação de um formulário em HTML puro para enviar dados ao servidor, usamos a tag <form> e tratamos o evento submit através da diretiva ng-submit , porém chegamos com a diretiva ng-form por causa dessa diretiva. ngForm na camada de script, e esse objeto armazena as propriedades usadas na validação de dados, mas ao criar a tag html, ainda criamos a tag <form> normal, você pode ler mais documentos do angularJS. Para manipular o evento submit, usamos a diretiva ng-submit . Há um ponto que notamos aqui, se você aprender HTML puro e JS, por padrão após o envio, o site será recarregado, mas não com este ng-submit, pois como eu disse, angularJS usa para construir uma aplicação SPA, então depois enviando, os dados serão colocados em uma lista e usamos a solicitação ajax para enviar os dados ao servidor sem recarregar a página.
Exemplo de ng-form combinado com ng-submit :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example ngform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mycontroller"> <form ng-submit="submit()"> <input ng-model="myForm.name" type="text" name="name" placeholder="Name"> <input ng-model="myForm.email" type="email" name="email" placeholder="Email"> <input ng-model="myForm.password" type="text" name="password" placeholder="password"> <input ng-model="myForm.confirmPassword" type="text" name="confirmpassword" placeholder="confirmpassword"> <input type="submit" value="Register"> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('mycontroller', function($scope) { $scope.myForm = {}; $scope.myForm.name = "sdfsdf"; $scope.myForm.email = ""; $scope.myForm.password = ""; $scope.myForm.confirmPassword = ""; $scope.submit = function() { console.log($scope.myForm); // send ajax to server or database // in this case, we just save data to localstorage localStorage.setItem('listuser', JSON.stringify($scope.myForm)); } }); </script> </html>Defina suas próprias diretivas em angularJS (diretivas personalizadas)
Documentos: https://docs.angularjs.org/guide/directive
Embora o angularJS forneça muitas diretivas que nos ajudam a atender a maioria dos requisitos ao construir uma aplicação, podemos criar uma diretiva autodefinida para atender o negócio no caso de diretivas.
O aplicativo .AngularJS na inicialização encontrará automaticamente os elementos correspondentes e executará uma operação única usando o método compile() da diretiva personalizada e, em seguida, processará o elemento usando o método link () de uma diretiva personalizada com base no escopo da diretiva. Antes de entrar no exemplo, precisamos entender o conceito geral de tipo de diretiva.
- Diretivas de elemento − Diretivas que são acionadas quando um elemento correspondente é encontrado.
- Atributo – A diretiva que é acionada quando um atributo correspondente é encontrado.
- Classe (diretiva de classe) − Uma diretiva que é acionada quando uma classe correspondente é encontrada.
- Comentário (diretiva de comentário) − A diretiva é ativada quando um comentário correspondente é encontrado.
Esses tipos de diretivas são usados para especificar o valor do atributo restrito ao inicializar diretivas: E (Elemento) A(Atributos) C (Classe) M (comentário). Normalmente, usamos principalmente EA (indicador de elemento e atributo).
Exemplo de auto-inicialização de uma diretiva personalizada básica em angularJS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <customdirective></customdirective> <div customdirective></div> <div class="customdirective"></div> </div> </body> <script> var app = angular.module('myApp', []); app.directive('customdirective', function() { return { restrict: 'EAC', template: '<h2>Hello World custom directive</h2>' }; }); app.controller('myController', function($scope) { $scope.name = ""; }); </script> </html>Resultados ao imprimir no navegador
Por exemplo, criando uma aplicação com várias diretivas, cada diretiva contém parâmetros passados para aumentar a flexibilidade do programa, com esse recurso, podemos criar nossas próprias estruturas HTML reutilizáveis e os dados são atualizados dinamicamente de acordo com o parâmetro de entrada.
Etapa 1: crie o arquivo de código index.html de amostra da seguinte maneira
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example custom directive</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-app="myApp"> <div ng-controller="myController"> <form ng-submit="handlesubmit($event)"> <div surveyform name="person1" submit="directiveSubmit"></div> </form> <form ng-submit="handlesubmit($event)"> <div surveyform name="person2"></div> </form> </div> </body> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope) { $scope.person1 = { fullname: "John", email: "abc@gmail.com", phonenumber: 1234567890 } $scope.person2 = { fullname: "Toanngo92", email: "trienkhaiweb@gmail.com", phonenumber: 2123456789 } $scope.handlesubmit = function ($event) { console.log($event); // todo here } }); app.directive('surveyform', function () { let directive = {}; directive.restrict = 'EAC'; directive.templateUrl = 'surveyForm.html'; directive.scope = { person: '=name', submit: '=' }; directive.compile = function (element, attributes) { // console.log(element); element.css("border", "1px solid #cccccc"); element.css("padding", "10px"); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function ($scope, element, attributes) { } return linkFunction; } return directive; }); </script> </html>Etapa 2: crie o arquivo surveyForm.html com a estrutura abaixo
<label>fullname</label> <br /> <input type="text" ng-model="person.fullname" /> <br /> <label>Email</label> <br /> <input type="text" ng-model="person.email" /> <br /> <label>Phone</label> <br /> <input type="number" ng-model="person.phonenumber" /> <br /> <button type="submit">submit</button>Resultado ao imprimir no navegador:
Podemos ver que podemos reutilizar 2 formulários html sem reescrever, 2 formulários executando a mesma estrutura e usando 2 modelos separados.
Aqui está o fim dos conceitos básicos de diretivas, de fato, se usar as diretivas padrão já é suficiente no processo de aprendizado, para projetos complexos que precisam reutilizar muitos componentes, podemos usá-los.solução aplicar diretivas personalizadas para resolver.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
