Quando se trata de AngularJS, a primeira coisa em que pensamos é provavelmente o sistema de ligação e instrução de dados bidirecionais, que também são os aspectos mais atraentes dos angulares. Quanto à ligação de dados bidirecional, sinto que não há nada a dizer. Hoje, discutiremos brevemente o sistema de instruções da estrutura do AngularJS. Também sou iniciante e consultei algumas informações. Se houver algumas coisas ruins, Wan Wang apontou.
As diretrizes são a parte mais importante dos AngularJs; portanto, essa estrutura vem com mais instruções, mas no desenvolvimento, essas instruções geralmente não podem atender às nossas necessidades; portanto, também precisamos personalizar algumas instruções. Em seguida, uma diretiva AngularJS pode ter quatro formas de expressão no código HTML:
1. Use como um novo elemento HTML.
<Lalle> </la> ou <ló/>
2. Use como um atributo de um elemento
<Div Hello> </div>
3. Use como uma classe de elemento
<div> </div>
4. Use como comentários
<!-Diretiva: Olá->
Observe que há uma armadilha aqui, que deve ter um espaço após "Diretiva: Olá", caso contrário, será inútil. Ao mesmo tempo, é recomendável usar menos métodos de anotação. Se você tiver que buscar alta qualidade, seja casual. Como as instruções têm as quatro formas de expressão acima, como elas as definem especificamente?
.Directive ('hello', function () {return {restritt: 'aecm', modelo: '<butter> clique em mim </butut>'}})O acima é o código mais simples para definir uma diretiva, sem dúvida. No código acima, o método Directive () define uma nova instrução. O método possui dois parâmetros. O primeiro 'olá' é especificar que o nome da instrução é olá e o segundo parâmetro é a função que retorna o objeto de instrução. Portanto, no código acima, a função usa principalmente duas propriedades para definir esta diretiva Hello:
1. O atributo restrito [string] é usado principalmente para especificar qual forma de expressões pode ser usada no código HTML. A representa atributos, e representa elementos, C representa classes e M representa comentários. Em situações reais, geralmente usamos os dois métodos de AE.
2. O atributo do modelo [string ou função] especifica a marcação HTML gerada pelo comando depois de ser compilada e vinculada pelo Angular. Esse atributo pode ser tão simples quanto apenas um texto HTML dentro, ou pode ser particularmente complexo. Quando o valor do atributo é a função, o método retorna uma string representando o modelo e a expressão {{}} também pode ser usada nele.
Modelo: function () {return '<button> clique em mim </botão>'; }Mas, em geral, o atributo de modelo será substituído pelo templateurl e é usado para apontar para um endereço de arquivo externo, por isso geralmente colocamos o modelo em um arquivo HTML externo e, em seguida, usamos o modelo para apontá -lo.
Ao definir instruções, além dos dois atributos mais básicos acima, também usaremos muitos outros atributos. Então, vamos falar sobre eles um por um:
1. Atributo prioritário [número], esse atributo é usado para especificar a prioridade das instruções personalizadas. Quando há mais de uma instrução sobre um elemento DOM, você precisa comparar a prioridade das instruções. As instruções com maior prioridade são executadas primeiro. Essa prioridade é usada para classificar a função de compilação antes de executar a instrução. Portanto, falaremos sobre a função de compilação cuidadosamente abaixo.
2. Atributo do terminal [booleano], este parâmetro é usado para definir se deve interromper as instruções no elemento atual que têm prioridade mais baixa do que esta instrução. Se o valor for verdadeiro, é normal. É executado na ordem de prioridade. Se estiver definido como falso, as instruções sobre o elemento atual que têm prioridade mais baixa do que esta instrução não serão executadas.
3. Substitua o atributo [booleano], esse atributo é usado para especificar se o conteúdo HTML gerado substituirá o elemento HTML que define esta diretiva. Quando definirmos o valor dessa propriedade como True, abra o console e olhe para ela, você descobrirá que o elemento gerado por esta instrução ficará assim:
Quando definimos como false, ficará assim:
.
4. Atributo do link [função]. No exemplo acima, o comando que personalizamos na verdade não tem muito significado. Este é apenas o comando mais simples. Existem muitos atributos que não definimos para isso, por isso não é de muita utilidade. Por exemplo, esta função de link inclui três parâmetros: escopo, elemento e attrs. Essa função de link é usada principalmente para adicionar monitoramento de eventos aos elementos DOM, monitorar alterações de atributo de modelo e atualizar o DOM. Tem três parâmetros:
1: parâmetro de escopo. Quando não definimos atributos do escopo para a instrução, ele representa o escopo do controlador pai.
2: O parâmetro do elemento é o JQLite (um subconjunto de jQuery) da instrução para envolver o elemento DOM. Se você introduziu o jQuery antes de introduzir o AngularJS, esse elemento é o elemento jQuery, não o elemento jqlite. Como esse elemento foi envolvido pelo JQuery/JQLite, não precisamos mais usar $ () para envolvê -lo ao executar operações DOM.
Três: o parâmetro ATTRS, que contém o objeto de parâmetro padronizado dos atributos do elemento em que a diretiva está localizada.
5. O escopo [atributo booleano ou objeto] é usado para definir o escopo da instrução. É falso por padrão. Ou seja, a instrução herda o escopo do controlador pai. Você pode usar os atributos no escopo do controlador pai à vontade, mas, dessa maneira, ele poluirá os atributos no escopo dos pais, o que não é aconselhável. Portanto, podemos deixar o escopo tomar os dois valores a seguir: true e {}.
Quando é verdade, significa que o Angular cria um escopo herdado do escopo dos pais para a instrução.
var myApp = angular.module ('myApp', []) .Controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'vermelho';}]) .dirive ('hello', function () {return {restrito: 'aecm', replyt: style = "Background-Color: {{color}}"> clique em mim </tobut> ', escopo: true, link: function (escopo, elementos, atts) {elements.bind (' click ', function () {elements.css (' background-color ',' azul ');}}}}}})Aqui, definimos um atributo de cor para o escopo dos pais e o atribuímos a vermelho. No atributo de escopo da diretiva Hello, damos verdadeiro, então Angular cria um escopo herdado do escopo dos pais para esta diretiva. Em seguida, no atributo modelo, usamos {{}} para usar o atributo de cor herdado do escopo dos pais, para que o botão fique vermelho.
Quando {}, significa que um escopo isolado é criado e as propriedades do escopo dos pais não serão herdadas. Mas às vezes também precisamos acessar as propriedades ou métodos no escopo dos pais, então o que devemos fazer? Angular há muito tempo pensa nisso para nós. Existem três maneiras de lembrar as operações acima:
1: Use @ para implementar a ligação unidirecional. Se apenas darmos ao escopo esse valor {}, a cor de fundo do botão no código acima será cinza. , e se precisarmos usar o atributo de cor do escopo dos pais, podemos escrever isso:
escopo {color: '@color'} <hello color = "{{color}}"> </hello>Há dois pontos a serem observados aqui: 1. A cor da propriedade no escopo representa a cor na expressão {{}} e os dois devem ser consistentes. 2. O valor da cor do atributo no escopo, ou seja, a cor após @, representa a cor do atributo no elemento HTML abaixo, para que os dois também sejam consistentes. Se o nome do atributo aqui for o mesmo que o nome usado na expressão {{}} no modelo, o nome do atributo após @ poderá ser omitido e escrito na forma a seguir.
escopo {color: '@'}A partir do valor do escopo da instrução, pode -se ver que a cor na expressão {{}} no modelo de instrução aponta para o atributo de cor do elemento atual, e o valor desse atributo de cor é o valor da cor da propriedade do escopo dos pais. O escopo dos pais passa seu valor de atributo de cor para o atributo de cor do elemento atual e, em seguida, o atributo de cor passa o valor para a cor da expressão no modelo. Este processo é unidirecional.
Dois: use = para implementar a ligação bidirecional
.Directive ('hello', function () {return {restrive: 'aecm', substituir: true, modelo: '<button style = "background-color: {{color}}"> clique em mim </button>', escopo: {color: '='}, link: função (scope, elementos, atts) {elementos (elementos '', '' ','}, função: função (scope, scope,, atts) {elementos (elementos '', '' ','}, função: função (scope, elementos, atts) {elementos (elementos '' ', ('}, link: função (scope, elementos, attrs) {elementos (elementos '. elementos.css ('cor de fundo', 'azul');<hello color = "color"> </la> <input type = "text" ng-model = "color"/>
Aqui, temos a ligação bidirecional O atributo de cor no escopo da instrução e o atributo de cor no escopo dos pais e adicione um evento de clique à função de link da instrução. Clicar no botão alterará a cor do botão e alterará o valor do atributo de cor do escopo da instrução e, em seguida, adicionará uma tag de entrada à página HTML, saída ou entrada do valor do atributo de cor do escopo pai. Há um local para observar aqui: o valor do nome do atributo do elemento atual não precisa adicionar a expressão {{}}, porque o escopo dos pais aqui passa um modelo de dados de escopo real, não uma string simples, para que possamos passar strings simples, matrizes e até objetos complexos para o escopo da instrução. Agora vamos ver o que acontece ao clicar neste botão.
Aqui podemos ver que a cor do botão mudou para Pink, o que significa que o clique altera o atributo de cor do escopo do comando, o que faz com que a cor do botão seja alterada. Mas aqui não está apenas o botão que mudou. Preste atenção ao valor no formulário de entrada também se tornou rosa, o que significa que o atributo de cor do escopo dos pais também mudou. Além disso, vamos inserir uma cor na entrada para ver quais mudanças ocorreram.
, pode -se observar que, quando inserimos outra cor no formulário, a cor do botão também muda, o que significa que o atributo de cor do escopo do comando foi alterado. Em resumo, podemos descobrir que usar '=' é uma ligação de mão dupla.
Três: use e chame o método no escopo dos pais
var myApp = angular.module ('myApp', []) .Controller ('myctrl', ['$ scope', function ($ scope) {$ scope.color = 'vermelho'; $ scope.sayhello = function () {alert ('hello');};}]). replace:true, 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'); escopo. $ aplicar (function () {scope.color = 'rosa';})})}}})<hello color = "color" dizhello = "sayhello ()"> </hello> <input type = "text" ng-model = "color"/>
Aqui também temos duas coisas a serem observadas: 1. Não precisamos apenas usar a diretiva NG-Click no modelo para vincular o método no escopo dos pais a ser chamado, mas também adicionar uma propriedade ao elemento atual, e essa propriedade aponta para o método do escopo dos pais a ser chamado. 2. O atributo de três do escopo de instrução dizhello, o atributo atual do elemento dizhello e o nome do método do evento que vincula o modelo deve ser consistente. Em seguida, podemos clicar no botão e uma caixa de diálogo aparece.
6. Atributo transclude [booleano], este atributo é usado para nos permitir especificar se a diretiva pode conter qualquer conteúdo
.Directive ('hello', function () {return {restrive: 'aecm', substituir: true, transclude: true, escopo: {}, modelo: '<div ng-transclude> </div>',}}) <Lalle> Hello <pan> {{color}} </span> </la>Quando seu valor é verdadeiro, esta é a saída de valor na página. Quando falso, a página ficará em branco. Há um lugar para prestar atenção aqui, que é <pan> {{color}} </span>. A cor aqui é a cor no escopo dos pais. Não é o atributo de cor do escopo na diretiva.
7. Compile [função] parâmetro. Este método possui dois elementos de parâmetros, attrs. O primeiro elemento do parâmetro refere -se ao elemento em que a instrução está localizada e o segundo attrs refere -se à lista padronizada de parâmetros atribuídos no elemento. Aqui também temos um local para observar: a função de compilação não pode acessar o escopo e deve retornar uma função de link. No entanto, se a função de compilação não estiver definida, você poderá configurar a função de link normalmente (com compilação, você não pode usar o link, a função de link é retornada pela compilação).
.Directive ('hello', function () {return {restrito: 'aecm', substituir: true, traduzir: true, modelo: '<botão ng click = "sayhello ()" style = "background-color: {{color}}"> clique em mim </button', scope: {{'=',, {color}} "> (escopo, elementos, atts) {elementos.bind ('click', function () {elementos.css ('colorido de fundo', 'azul'); escopo.Agora vamos clicar neste botão
Descobrimos que o que aconteceu depois de clicar no botão aqui é o mesmo que o atributo de link antes, e na verdade não há muita diferença.
De fato, na maioria dos casos, precisamos usar apenas a função de link. Isso ocorre porque a maioria das instruções só precisa considerar registrar o modelo de escuta de eventos, monitoramento e atualização do DOM, o que pode ser feito nas funções de link. No entanto, para instruções como NG-repetição, os elementos DOM precisam ser clonados e repetidos várias vezes, e a função de compilação é feita antes que a função de link seja executada. Então, por que precisamos de duas funções separadas para concluir o processo de geração e por que não podemos simplesmente usar um? Para responder bem a essa pergunta, precisamos entender como as diretrizes são compiladas no Angular!
8. Como as instruções são compiladas
Quando nossa bota de aplicativo angular for iniciada, o Angular usará o serviço $ compilador para atravessar o elemento DOM. Depois que todas as instruções forem reconhecidas, o método de compilação da instrução será chamado, uma função de link será retornada e, em seguida, a função de link será adicionada à lista de funções de link executadas posteriormente. Esse processo é chamado de estágio de compilação. Instruções como NG-repetir precisam ser repetidas e clonadas muitas vezes. A função de compilação é executada apenas uma vez durante o estágio de compilação e esses modelos são copiados, mas a função de link é executada para cada instância copiada. Portanto, podemos lidar com isso separadamente para melhorar nosso desempenho (essa frase é um pouco irrealista, eu o copiei de outros lugares.
9. Controlador [string ou função] e requer parâmetros [string ou string []]. Quando queremos permitir que outras instruções interajam com suas instruções, precisamos usar a função do controlador. Quando outra diretiva deseja interagir, ela precisa declarar sua referência à instância do controlador da sua diretiva.
.directive ('hello', function () {return {scope: {}, requer: '^ele', compilar: function (elemento, atts) {return function (escopo, elementos, attrs, cntins) {cntins.fn ()};}}}. ($ SCOPE, $ Compile, $ http) {this.fn = function () {alert ('hello');<Le> <hello color = "color" dizhello = "sayhello ()"> </la> </he>
Quando a página é carregada, uma caixa de diálogo será exibida.
Bem, o exposto acima é o que aprendi sobre as instruções que aprendi durante esse período de tempo. Vamos escrever este.
A análise abrangente acima das instruções no AngularJS (deve ler) é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.