Este tutorial usa a versão AngularJS: 1.5.3
AngularJS Github: https://github.com/angular/angular.js/
Endereço para download do AngularJS: https://angularjs.org/
Resumo: Diretiva (Instruções) O autor acredita que é uma das funções muito poderosas e úteis do AngularJ. É equivalente a escrever um elemento DOM público ou atributo de classe ou atributo de classe para nós, e não é apenas isso, você também pode manipular o escopo, vincular eventos, mudar estilos etc. com base. Através desta diretiva, podemos encapsular muitas instruções públicas, como instruções de paginação, instruções de conclusão automáticas etc. Em seguida, você só precisa escrever uma única linha de código na página HTML para obter muitas funções poderosas. De um modo geral, a diretiva precisa ser usada para ter os seguintes cenários:
1. Torne seu HTML mais semântico e você não precisa estudar o código e a lógica em profundidade para conhecer a lógica geral da página.
2. Resumo Um componente personalizado e reutilize -o em outro lugar.
1. A definição de diretiva e seu método de uso
A definição da diretiva angularJS é aproximadamente a seguinte
angular.module ("app", []).A diretiva pode ser colocada em nomes de elementos, atributos, classes e comentários. A seguir, é a maneira equivalente de citar Mydir, a diretiva. (Mas muitas diretivas são limitadas ao uso de "propriedades")
<span <span style="font-family: Arial, Helvetica, sans-serif;">directive-name</span><span style="font-family: Arial, Helvetica, sans-serif;">="exp"></span>//Properties</span> <span style="font-family: Arial, Helvetica, SANS-SERIF; "> NAME DIRETIVO </span>> </<span style =" font-family: Arial, Helvetica, Sans-Serif; "> Nome de Diretiva </span> </<style style =" Font-Family: ARIAL, Helvetica, Sans-Serif; "> Diretivo-Name </spany >> sans-serif; "> nome diretivo </span>> // elemento <!-diretiva: <span style =" font-family: arial, helvetica, sans-serif; "> name diretiva </span> <span style =" font-family: arial, helvetica, sans-serif; "> exp-> //
O exemplo a seguir:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5/angular.js"> "> <La-world> </lloworld> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Directive ('Helloworld', function () {return {Restritt: 'E', modelo: '<div> oi eu sou Lin Bingwen ~~~ </div>', substituir: true};}); </script> </html>resultado:
Abaixo está uma versão detalhada da diretiva
var myModule = angular.module (...); mymodule.Directive ('DirectiveName', Função Factory (injetável) {var diretivoefinitionObject = {Prioridade: 0, modelo: '<div> </div>', modelurl: 'Directive.html', substituir: FALSO, FUNCLUDE: FALSE, FALSE: 'A', escopo: false, False, Function: Funct): Funda: Funda: Funda: 'A' A 'A', Escopo: False, Prelink (escopo, iElement, IATTRS, controlador) {...}, post: função pós -link (escopo, iElement, IATTRS, controlador) {...}}}, link: função pós -regresso (escopo, iElement, iattrs) {...}};2. Interpretação do conteúdo do comando da diretiva
Você pode ver que tem 8 conteúdos
1.Restre
(String) Parâmetros opcionais indicam a forma da instrução declarada no DOM; Os valores são: e (elemento), a (atributo), c (classe), m (notação) e o valor padrão é a; Obviamente, dois também podem ser usados juntos, como a EA. A representação pode ser um elemento ou um atributo.
[html] Exibir fragmentos de código de cópia simples de cópia no código derivado do meu fragmento de código
E (elemento): <DirectoDivename> </clarDivename>
A (Propriedade): <div Directivename = 'Expression'> </div>
C (classe): <div class = 'Directivename'> </div>
M (Nota): <-Diretiva: Directivename Expression->
De um modo geral, E/A/C é usado com mais frequência.
2.Prioridade
(número), parâmetros opcionais, especifique a prioridade da instrução. Se houver várias instruções sobre um único DOM, a prioridade mais alta será executada primeiro;
3. terminal
(Booleano), parâmetro opcional, pode ser definido como true ou falso. Se definido como true, outras instruções com uma prioridade inferior a esta instrução serão inválidas e não serão chamadas (a da mesma prioridade ainda será executada)
4.Template (string ou função) parâmetros opcionais, que podem ser:
(1) Um pedaço de texto HTML
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5/angular.js"> "> <La-world> </lloworld> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Directive ('Helloworld', function () {return {Restrit: 'E', Modelo: '<div> <h1> oi eu sou Lin Bingwen ~~~ </h1> </div>', substituir: true};}); </script> </html>(2) Uma função pode aceitar dois parâmetros de televisão e tattrs
Onde a televisão se refere ao elemento que usa essa diretiva, e o TATTRS é o atributo da instância, que é uma coleção (objeto) composta por todos os atributos do elemento, como:
<hello-world2 title = 'eu sou a segunda diretiva'> </llo-world2>
O título é o atributo nas tatuagens
Vamos ver o que acontece quando o modelo é uma função
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5/angular.js"> "> <La-World> </lloworld> <hello-world2 title = 'eu sou a segunda diretiva'> </helloworld2> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Directive ('Helloworld', function () {return {Restrit: 'E', Modelo: '<div> <h1> oi eu sou Lin Bingwen ~~~ </h1> </div>', substituir: true};}); App.Directive ("Helloworld2", function () {return {Restrive: 'EAC', modelo: function (televisão, tattrs) {var _html = ''; _html += '<div>' +'hello' +tattrs.title +'</div>; return _htmm; </script> </html>resultado:
Você pode ver que o campo do título na tag no Hello-World2 também é usado na diretiva.
5.Templateurl (string ou função), parâmetro opcional, pode ser
(1) Uma string representando o caminho do arquivo html
(2) Uma função pode aceitar dois parâmetros de televisão e tattrs (aproximadamente o mesmo que acima)
NOTA: Durante o desenvolvimento local, você precisa executar um servidor, caso contrário, o uso do templateURL causará um erro de script de solicitação de origem cruzada (CORS). Como o carregamento dos modelos HTML é carregado de forma assíncrona, o carregamento de um grande número de modelos diminuirá o site. Aqui está um truque, que é cache o modelo primeiro
Você pode carregar sua página de índice e incluir o código a seguir como parte da sua página.
<script type = 'text/ng-template' id = 'hello.html'> <div> <h1> oi eu sou lin bingwen ~~~ </h1> </div> </s script>
O atributo de identificação aqui está definido no templateurl.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5/angular.js"> "> <La-world> </lloworld> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Directive ('Helloworld', function () {return {RESTRITT: 'E', templateurl: 'hello.html', substituir: true};}); </script> <script type = 'text/ng-template' id = 'hello.html'> <div> <h1> oi eu sou lin bingwen ~~~ </h1> </div> </cript> </html>Resultado da saída:
Outra maneira de cache é:
App.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> oi eu sou lin bingwen ~~~ </h1> </div>");}]);Exemplos de uso são os seguintes:
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5/angular.js"> "> <La-world> </lloworld> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Directive ('Helloworld', function () {return {RESTRITT: 'E', templateurl: 'hello.html', substituir: true};}); App.run (["$ templatecache", function ($ templatecache) {$ templatecache.put ("hello.html", "<div> <h1> oi eu sou lin bingwen ~~~ </h1> </div>");}]); </script> </html>resultado:
De fato, o primeiro método é melhor, será mais rápido escrever. O autor tem mais e o primeiro método a escrever, que está diretamente incluído no SCPRIT.
6.Reguplicar
(Valor booleano), o valor padrão é falso. Quando definido como true, vamos dar uma olhada no exemplo a seguir (compare os exemplos fornecidos no modelo)
Quando a substituição é verdadeira, a tag Hello-World não está mais lá, caso contrário, existe.
7.Scope
(1) O valor padrão é falso. Indica herança do escopo dos pais;
(2) Verdadeiro. Indica herdando o escopo dos pais e criando seu próprio escopo (escopo filho);
(3) {}. Indica a criação de um escopo de isolamento completamente novo;
7.1 Primeiro, vamos entender o mecanismo de herança do escopo. Vamos usar o comando ng controlador como exemplo.
<! Doctype html> <html lang = "zh" ng-App = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5.3/angular.minjs" ng-Controller = 'MainController'> Pai: {{name}} <input ng-model = "name"/> <div my-Direction> </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('MyApp', [];]; App.Controller ('MainController', função ($ scope) {$ scope.name = 'lin bingwen';}); App.Directive ('MyDirective', function () {return {Restritt: 'ea', escopo: false, modelo: '<div> filho: {{name}} <input ng-model = "name"/> </div>'};}); </script> </html>Em seguida, usamos um exemplo simples e claro para ilustrar as diferenças nos valores do escopo:
Escopo: Falso
Escopo: Verdadeiro
escopo:{}
Quando falso, o filho herda o valor do pai e muda o valor do pai, e o valor do filho também muda e vice -versa. (A herança não é isolada)
Quando é verdade, o filho herda o valor do pai e muda o valor do pai. O valor do filho muda de acordo, mas quando o valor do filho muda, o valor do pai permanece inalterado. (Herança e isolamento)
Quando {}, o valor do pai não é herdado, portanto o valor do filho está vazio. Alterar o valor de qualquer uma das partes não pode afetar o valor da outra parte. (Sem herança e isolamento)
Dica: o escopo de isolamento é uma boa opção quando você deseja criar um componente reutilizável. Ao isolar os escopos, garantimos que as diretrizes sejam "independentes" e possam ser facilmente inseridas em qualquer aplicativo HTML, e essa abordagem impede que o escopo dos pais seja contaminado;
7.2 Escopos de isolamento Você pode acessar as propriedades do escopo dos pais por meio de políticas de ligação.
A diretiva fornece três maneiras de interagir com locais fora do isolamento ao usar o escopo do isolamento. Esses três são
@ Ligue um atributo de escopo local ao valor da propriedade do nó DOM atual. O resultado é sempre uma string, porque o atributo DOM é uma string.
& Fornece uma maneira de executar uma expressão no contexto do escopo dos pais. Se o nome do Attt não for especificado, o nome do atributo será o mesmo nome local.
= Crie uma ligação bidirecional entre o atributo local do escopo e o nome do atributo de escopo dos pais através do valor do atributo ATTR da diretiva.
@ atributo de escopo local
@ Método Os atributos locais são usados para acessar valores de string definidos pelo ambiente externo da diretiva, principalmente vinculando valores de string externos através do atributo de tag onde a diretiva está localizada. Essa ligação é unidirecional, ou seja, as alterações de ligação do escopo dos pais. As propriedades do escopo da diretiva mudarão de maneira síncrona, enquanto as alterações de ligação no escopo são isoladas e o escopo dos pais não é conhecido.
O exemplo a seguir: Diretiva declara que o tipo de escopo não está isolado e usa o atributo de nome de ligação @ e usa o atributo de nome para vincular o atributo no escopo dos pais na diretiva. Ao alterar o valor do atributo no escopo dos pais, a diretiva atualizará o valor de maneira síncrona. Ao alterar o valor da propriedade do valor da propriedade do escopo do escopo da diretiva, o escopo dos pais não pode atualizar o valor de maneira síncrona.
Código JS:
<! Doctype html> <html lang = "zh" ng-App = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5.3/angular.minjs" ng-controller="myController"> <div> <div> Parent scope: <div>Say: {{name}}<br>Change the name of the parent scope: <input type="text" value="" ng-model="name"/></div> </div> <div>isolated scope: <div isolated-directive name="{{name}}"></div> </div> <div> Escopo isolado (não usando o escopo dos pais {{name}}): <div-Direction name = "name"> </div> </div> </div> </body> <script type = "text/javascript"> var App = angular.module ('myApp',]); App.Controller ("MyController", function ($ scope) {$ scope.name = "hello world";}). ng-model = "nome"> '}; </script> </html>Resultados: o efeito inicial da página
Efeito de animação:
Você pode ver que o conteúdo do escopo dos pais mudou e o escopo da criança mudou ao mesmo tempo. E o conteúdo no subscópio mudou. Não afeta o conteúdo no escopo dos pais!
= atributo de escopo local
= Crie uma ligação bidirecional entre o atributo local do escopo e o nome do atributo de escopo dos pais através do valor do atributo ATTR da diretiva.
Ou seja, quando você deseja uma propriedade vinculada de mão dupla, você pode usar = para introduzir propriedades externas. Seja alterando o escopo dos pais ou isolando as propriedades no escopo, o escopo dos pais e o escopo do isolamento atualizarão os valores da propriedade ao mesmo tempo, porque são relacionamentos de mão dupla.
Código de exemplo:
<! Doctype html> <html lang = "zh" ng-App = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5.3/angular.minjs" ng-CONTROLLER = "MyController"> <div> Escopo dos pais: <div> diga: {{user.name}} <br> Altere o nome do escopo dos pais: <input Type = "text" value = "" ng-model = "userBase.name"/> </div> </div> <div> isoloud ". </div> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Controller ("MyController", function ($ scope) {$ scope.userbase = {name: 'hello', id: 1};}). type = "buttom" value = "" ng-model = "user.name"/> '}}) </script> </html>Efeito:
Você pode ver que o conteúdo no escopo dos pais e o escopo da criança é sempre o mesmo!
e atributos de escopo local
O método & fornece uma maneira de executar diretamente uma expressão no contexto do escopo dos pais. Essa expressão pode ser uma função.
Por exemplo, quando você escreve uma diretiva, quando o usuário clica em um botão, a diretiva deseja notificar o controlador, o controlador não pode saber o que está acontecendo na diretiva. Talvez você possa fazer isso usando a transmissão de eventos no Angular, mas você deve adicionar um método de escuta de eventos ao controlador.
A melhor maneira é permitir que a diretiva passe uma função no escopo dos pais. Quando há alguma ação na diretiva que precisa ser atualizada para o escopo dos pais, um pedaço de código ou uma função pode ser executado no contexto do escopo dos pais.
O exemplo a seguir executa a função do escopo dos pais na diretiva.
<! Doctype html> <html lang = "zh" ng-App = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5.3/angular.minjs" ng-CONTROLLER = "MyController"> <div> Escopo pai: <div> diga: {{value}} </div> </div> <div> escopo isolado: <div-DIROD-DIRETION (ACTIONSCRIPT () ">"> </div> </div> <//bodymring (script = "" "> </javr (/div) </div (/Div) (/Div)", ">"> </div) "> </div)"> </div) "> </div)"> </div) </div> </div> <div> escopo isolado: <div-Dirum-DIROD = "click ()"> </div> </div> </div) []); App.Controller ("MyController", function ($ scope) {$ scope.value = "hello world"; $ scope.click = function () {$ scope.value = math.random ();};}). Directive ("isolatedDirection", function,) {); value = "Executar método da definição do escopo dos pais na diretiva" ng-click = "action ()"/> '}}) </sCript> </html>Efeito:
Existem muitos conteúdos de instruções, vamos falar sobre translude, complinar, link e controlador.
8. Transclude
Se você não deseja que o conteúdo dentro da diretiva seja substituído pelo modelo, poderá definir esse valor como true. Geralmente, ele precisa ser usado com a diretiva NGTransclude. Por exemplo: Modelo: "<div> olá todo <div ng-transclude> </div> </div>", neste momento, o conteúdo dentro da instrução será incorporado na divclude ng. Isto é, torna -se <div> Olá a cada <div> Este é o conteúdo dentro do comando </div> </div>. O valor padrão é falso; Essa opção de configuração nos permite extrair o conteúdo contido no elemento Diretiva e, em seguida, coloque -o em uma posição específica no modelo de diretiva. Quando você habilita o TransClude, você pode usar o NG-Transclude para indicar onde colocar conteúdo traduzido
<! Doctype html> <html lang = "zh" ng-App = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5.3/angular.minjs" link </li> <li> Segundo link </li> </ul> </div> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.directive ('Sidebox', function () {return {Restrive: 'ea', escopo: {title: '@'}, tradutor: true, modelo: '<div>/ <div>/ <h2> {{title}}} </h2>/ <ng-TRANSCLUSE>/ </ </ </>; </script> </html>resultado:
Quando translude: false,
Se a instrução usar o parâmetro transclude, o controlador não poderá monitorar as alterações no modelo de dados normalmente. Recomenda -se usar o serviço $ relógio na função Link.
9. Controlador
Pode ser uma string ou uma função.
Se for uma string, use a sequência como o nome do controlador para encontrar o construtor do controlador registrado no aplicativo.
angular.module ('myApp', []) .Directive ('myDirection', function () {restrive: 'a', // controlador: 'SomeController'}) // outros lugares no aplicativo podem ser o mesmo arquivo ou outro arquivo contido em index.html angular.module ('MyApp'). $ attrs, $ transclude) {// A lógica do controlador é colocada aqui}); Ele também pode ser definido como funções anônimas diretamente dentro da instrução, e podemos injetar qualquer serviço aqui ($ log, $ timeout, etc.) [html] Exibir cópia simples visualizar a fatia do código no código derivado do meu código de slice angular.module ('myApp', []). $ transclude) {// A lógica do controlador é colocada aqui}});Existem também alguns serviços especiais (parâmetros) que podem ser injetados
(1) $ escopo, escopo associado a elementos diretivos
(2) $ elemento, o elemento correspondente à instrução atual
(3) $ attrs, um objeto composto por atributos do elemento atual
(4) $ transclude, função de link incorporado, funções realmente executadas usadas para clonar elementos e operar DOM
NOTA: A menos que seja usado para definir algum comportamento reutilizável, geralmente não é recomendado aqui.
O controlador e as funções de link da instrução (a serem discutidas posteriormente) podem ser trocadas. A diferença é que o controlador é usado principalmente para fornecer comportamento que pode ser reutilizado entre as instruções, mas a função de link pode definir apenas o comportamento nas instruções internas atuais e não pode ser reutilizado entre as instruções.
<! Doctype html> <html lang = "zh" ng-app = "myApp"> <head> <meta charset = "utf-8"> <title> Introdução a angularjs </title> <script type = "text/javascript" src = ". 1.5/angular.nin.js" " Am Lin Bingwen ~~~ </la> </body> <script type = "text/javascript"> var app = angular.module ('myApp', []); App.Directive ('Hello', function () {return {Restritt: 'Ea', transclude: true, // Observe que ele deve ser definido como True Controller: function ($ Scope, $ elemento, $ attrs, $ transclude, $ log) {// aqui você pode injetar o serviço que deseja injetar $ '(function (clone) {var a; $ atts.mycolor); </script> </html>Resultado da saída:
E a saída olá a todos sob o console
Vamos ver $ transclude (); Aqui, podem levar dois parâmetros, o primeiro é $ escopo, escopo, e o segundo é uma função de retorno de chamada com o clone de parâmetros. E esse clone é na verdade o conteúdo incorporado (embrulhado pelo jQuery) e você pode fazer muitas operações de DOM nele.
O seu caminho mais fácil é
<Cript> angular.module ('myApp', []). Directive ('MySite', function () {return {Restrive: 'ea', transclude: true, controlador: function ($ scope, $ element, $ attrs, $ transclude, $ log) {var = $ trans) </script>NOTA: O uso de $ transclude gerará um novo escopo.
Por padrão, se usarmos de maneira simples e praticamente praticamente transclude (), o escopo padrão é o escopo gerado por $ transclude
Mas se usarmos $ transclude ($ scope, função (clone) {}), o escopo é o escopo da diretiva
Então a pergunta vem novamente. E se quisermos usar o escopo dos pais
$ scope. $ pai pode ser usado
Da mesma forma, se você deseja um novo escopo, também pode usar o $ SCOPE. $ Parent.new ();
10. Controlleras
Esta opção é usada para definir o alias do seu controlador
No passado, costumamos usar esse método para escrever código:
angular.module("app",[]) .controller("demoController",["$scope",function($scope){ $scope.title = "angualr"; }]) <div ng-app="app" ng-controller="demoController"> {{title}} </div>Mais tarde, o angularjs1.2 nos trouxe um novo açúcar de sintaxe, para que possamos escrever assim
angular.module("app",[]) .controller("demoController",[function(){ this.title = "angualr"; }]) <div ng-app="app" ng-controller="demoController as demo"> {{demo.title}} </div>Também podemos escrever isso no comando
<Cript> angular.module ('MyApp', []). </script>11.Require (string ou matriz)
Uma string representa o nome de outra instrução, que será usada como o quarto parâmetro da função de link. Podemos dar um exemplo para ilustrar o uso específico. Suponha que tenhamos que escrever duas instruções agora. Existem muitos métodos sobrepostos na função de link (a função de link será discutida posteriormente). No momento, podemos escrever esses métodos repetidos no controlador da terceira instrução (o controlador também é mencionado acima para fornecer o comportamento de reutilização entre as instruções). Em seguida, nessas duas instruções, requer a instrução com o campo do controlador (a terceira instrução).
Finalmente, você pode consultar esses métodos sobrepostos através do quarto parâmetro da função de link do link.
<! doctype html> <html ng-app = "myApp"> <head> <script src = "http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js" </script> </head> <body> <Oster-Diretive> <Iner-Directive2> </nner-Directive2> </os Outer-Directive> <cript> var app = angular.module ('myApp', []); App.directive ('OuterDirective', function () {return {scope: {}, restringir: 'ae', controlador: function ($ scope) {this.say = function (somedirective) {console.log ('obten:' + somedirection.Message);};}};};};};}; App.Directive ('Innerdirective', function () {return {Scope: {}, restringe: 'ae', requer: '^OutterDirective', link: function (escopo, elem, attrs, controllerInsay) {scope.message = "hi, leifeng"; »Stance.Say); App.Directive ('InnerDirective2', function () {return {Scope: {}, restringir: 'ae', requer: '^OutterDirection', link: function (escopo, elem, attrs, controllerInsay) {scope.message = "hi, shush; </script> </body> </html>As instruções inerdiretivas e diretivas inerdirective2 nos métodos de reutilização de exemplo acima definidos no controlador da diretiva externa.
É ainda explicado que o controlador na instrução é usado para se comunicar entre diferentes instruções.
Além disso, podemos adicionar um prefixo ao valor do parâmetro da necessidade, que mudará o comportamento do controlador de pesquisa:
(1) Sem um prefixo, a instrução será pesquisada no controlador fornecido por si mesmo. Se nenhum controlador for encontrado, um erro será lançado.
(2)? Se o controlador necessário não for encontrado na instrução atual, o NULL será passado para o quarto parâmetro da função de conexão do link
(3)^Se o controlador exigido não for encontrado na instrução atual, o controlador do elemento pai será encontrado
(4)?^ Combinação
12. Processo de compilação de instrução do anguar
Primeiro, carregue a biblioteca AngularJS e encontre a diretiva NG-APP para encontrar os limites do aplicativo.
Ligue para o Serviço de compilação para compilação de acordo com o escopo definido pelo NG-APP. AngularJS atravessará todo o documento HTML e processará as instruções declaradas na página de acordo com a prioridade das instruções de acordo com as instruções. O DOM é convertido de acordo com os parâmetros de configuração (modelo, local, translude, etc.) nas instruções e, em seguida, comece a executar a função de compilação de cada instrução em ordem (se a função de compilação for definida na instrução) para converter o próprio modelo.
Nota: A função de compilação aqui está configurada em nossa diretiva, que é diferente do serviço $ compilador mencionado acima. Após a execução de cada função de compilação, uma função de link será retornada e todas as funções de link serão combinadas em uma grande função de link.
Em seguida, essa grande função de link será executada, principalmente para ligação de dados, modificando dinamicamente os dados no escopo, registrando um ouvinte no DOM ou usando os relógios $ para ouvir variáveis no escopo para modificar o DOM, estabelecendo assim a ligação bidirecional, etc. Se a função de compilação não for configurada em nossa instrução, a função Link We Configued Will. O que ela faz é aproximadamente o mesmo que a função de grande link sintetizada por todas as funções do link após o retorno do compilação acima.
Portanto: nas diretivas, as opções de compilação e link são mutuamente exclusivas. Se essas duas opções forem definidas ao mesmo tempo, a função retornada pela compilação será considerada uma função de link e a própria opção de link será ignorada.
13. Função de compilação
Função Compile (Telement, TatTrs, Transclude) {...}
As funções de compilação são usadas para lidar com situações em que o modelo DOM precisa ser modificado. Como a maioria das instruções não requer modificação do modelo, essa função não é comumente usada. Exemplos que precisam ser usados incluem NGTrePeat, que exige que o modelo seja modificado, e o NGVIEW exige que o conteúdo seja carregado de forma assíncrona. A função compilada aceita os seguintes parâmetros.
Telement - elemento do modelo - o elemento no qual a diretiva reside. É seguro deformar esse elemento e seus subelementos.
TATTRS - Atributos do modelo - Todos os atributos declarados pela diretiva sobre esse elemento são compartilhados na função compilada.
Transclude - uma função de link incorporada (escopo, clonelinkingfn).
NOTA: Não execute nenhuma operação que não seja a deformação do DOM na função compilada. Mais importante, o registro de eventos de escuta DOM deve ser feito na função vinculada, não na função compilada.
Uma função compilada pode retornar um objeto ou função.
Função de retorno - equivalente a uma função de link registrada usando o atributo de link do objeto de configuração quando a função compilada não existe.
Objeto de retorno - retorna um objeto que registrou uma função através do atributo pré ou post. Consulte a explicação das funções pré-vinculador e pós-liquidação abaixo.
14. Função de vinculação
Link da função (escopo, ielement, iattrs, controlador) {...}
A função Link é responsável por registrar eventos DOM e atualizar o DOM. Ele é executado depois que o modelo for clonado e também é onde a maioria do código lógica de instruções é gravada.
Escopo - o escopo que as diretivas precisam ouvir.
IELEMENT - elemento da instância - o elemento em que a diretiva reside. É seguro operar em elementos filhos dos elementos na função pós -reticulência, porque todos estão vinculados.
Iattrs - Atributos da instância - Atributos da instância, uma lista padronizada de atributos declarados no elemento atual, que são compartilhados entre todas as funções vinculadas.
Instância do controlador - controlador, ou seja, controlador dentro do Direct2 solicitado pela instrução atual. Por exemplo: Controller: function () {this.addStlestRength = function () {}} Na diretiva Direct2, então, na função de link da diretiva atual, você pode chamá -lo através do controlador.AddStrength.
A função de pré-ligação é executada antes que os elementos filhos estejam vinculados. Ele não pode ser usado para deformar o DOM, caso a função de link não possa encontrar o elemento correto para vincular.
Função pós-reticulação Todos os elementos são executados após serem vinculados.
ilustrar:
A opção de compilação em si não é usada com frequência, mas a função de link é usada com frequência. Essencialmente, quando definimos a opção Link, na verdade criamos uma função de link postLink () para que a função compile () possa definir a função Link. Geralmente, se a função de compilação estiver definida, significa que queremos executar operações DOM antes que as instruções e os dados em tempo real sejam colocados no DOM. É seguro executar operações DOM, como adicionar e excluir nós nesta função. As opções de compilação e link são mutuamente exclusivas. Se essas duas opções forem definidas ao mesmo tempo, a função retornada pela compilação será considerada uma função de link e a própria opção de link será ignorada. A função de tradução é responsável por converter o modelo DOM. A função de link é responsável por vincular o escopo e o DOM. O DOM pode ser operado manualmente antes que o escopo esteja ligado ao DOM. Na prática, esse tipo de operação é muito raro ao escrever instruções personalizadas, mas existem várias instruções internas que fornecem essa funcionalidade. A função de link é opcional. Se uma função compilada for definida, ela retornará a função vinculada; portanto, quando as duas funções são definidas, a função compilada sobrecarrega a função vinculada. Se nossas instruções forem simples e não exigirem configurações adicionais, podemos retornar uma função da função de fábrica (função de retorno de chamada) para substituir o objeto. Se isso for feito, essa função é a função de link.
Este artigo é reproduzido http://blog.csdn.net/evankaka
O exposto acima é o conteúdo inteiro do uso do AngularJS: Instrução Diretiva, espero que seja útil para o aprendizado de todos.