Para instruções, eles podem ser simplesmente entendidos como funções que são executadas em elementos DOM específicos, e as instruções podem estender as funções desse elemento.
Primeiro, vamos dar uma olhada em um exemplo de parâmetro completo e depois apresentar as funções e usos de cada parâmetro em detalhes:
angular.module('myApp', []) .directive('myDirective', function() { return { restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {...}, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) { ... }, compile: // Return an object or connection function, as shown below: function(tElement, tAttrs, transclude) { return { pre: function(scope, iElement, iAttrs, controller) { ... }, POST: função (escopo, iElement, IATTRS, controlador) {...}} Retorne função postLink (...) {...}}};restringir [string]
RESTRITIR é um parâmetro opcional. Usado para especificar na forma da instrução que está sendo declarada no DOM. O valor padrão é A, ou seja, é declarado na forma de um atributo.
Os valores opcionais são os seguintes:
E (elemento)
<My-Direction> </ meu-Directive>
A (propriedade, valor padrão)
<div my-Direction = "Expression"> </div>
C (nome da classe)
<div> </div>
M (nota)
<-Diretiva: My-Directive Expression->
Geralmente, considerando a compatibilidade do navegador, é altamente recomendável que os atributos padrão sejam declarados imediatamente na forma de atributos. O último método é recomendado para não usar o índice de qualificação quando não for necessário.
Código:
angular.module ('App', []) .Directive ('myDirection', function () {return {Restrit: 'E', modelo: '<a href = "http://www.baidu.com"> Baidu </a>};}) htmlcode: <My-Diretive>Efeito:
prioridade [int]
A maioria das instruções ignora esse parâmetro e usa o valor padrão 0, mas alguns cenários são muito importantes ou até necessários para definir alta prioridade. Por exemplo, o NGREPEAT define este parâmetro para 1000, para que possa garantir que, no mesmo elemento, seja sempre chamado antes de outras instruções.
Terminal [Bool]
Este parâmetro é usado para parar de executar instruções no elemento atual com prioridade mais baixa que esta instrução. No entanto, as instruções com a mesma prioridade que a instrução atual ainda serão executadas.
Por exemplo: o NGIF possui uma prioridade um pouco maior que o NGVIEW (eles são na verdade parâmetros terminais). Se o valor de expressão do NGIF for verdadeiro, o NGVIEW poderá ser executado normalmente, mas se o valor da expressão NGIF for falso, o NGVIEW não será executado porque a prioridade do NGVIEW é baixa.
modelo [string ou função]
O parâmetro do modelo é opcional e deve ser definido como um dos dois formulários a seguir:
Um pedaço de texto HTML;
Uma função que pode aceitar dois parâmetros, os parâmetros são de televisão e TatTrs e retorna uma string representando o modelo. t em televisão e tattrs significa modelo, em relação à instância.
Primeiro, vamos demonstrar o segundo uso:
angular.module ('App', []) .Directive ('myDirection', function () {return {Restrive: 'eac', modelo: function (elem, att) {return "<a href = '" + att.value + "'>" +.Text + "</a>";};};};Htmlcode: (o efeito é o mesmo que acima, nenhuma demonstração será feita)
<My-Directive Value = "http://www.baidu.com" text = "Baidu"> </my-direction> <div my-Direction value = "http://www.baidu.com" text = "Baidu"> </div>
templateurl [string ou função]
templateurl é um parâmetro opcional, que pode ser do seguinte tipo:
Uma string representando o caminho de um arquivo HTML externo;
Uma função que pode aceitar dois parâmetros, os parâmetros são de televisão e TatTrs e retorna uma string com o caminho do arquivo HTML externo.
De qualquer maneira, o URL do modelo será passado pela camada de segurança interna do NG, especialmente $ getTrustedResourceurl, que protege o modelo de ser carregado por fontes não confiáveis. Por padrão, ao ligar para a diretiva, o arquivo de modelo HTML será solicitado através do AJAX em segundo plano. Carregar um grande número de modelos desacelerará severamente um aplicativo cliente. Para evitar a latência, os modelos HTML podem ser armazenados em cache antes de implantar o aplicativo.
Código:
angular.module ('App', []) .Directive ('myDirection', function () {return {Restrive: 'AEC', templateurl: function (elem, att) {return att.value + ".html"; // é claro que podemos especificar diretamente o caminho, e podemos incluir expressões no modelo}}}}}}}}}}Substitua [Bool]
Substitua é um parâmetro opcional. Se este parâmetro estiver definido, o valor deve ser verdadeiro porque o valor padrão será falso. O valor padrão significa que o modelo será inserido no elemento que chama essa diretiva como um elemento filho.
Por exemplo, sob o valor padrão do exemplo acima, o código HTML gerado é o seguinte:
<My-Directive Value = "http://www.baidu.com" text = "Baidu"> <a href = "http://www.baidu.com"> Baidu </a> </ meu-direction>
Se substituir = true está definido
<a href = "http://www.baidu.com" value = "http://www.baidu.com" text = "Baidu"> Baidu </a>
De acordo com minha observação, esse efeito só mostrará efeito real quando restringir = "e".
Depois de introduzir os parâmetros básicos de instrução, os parâmetros mais importantes do escopo estão envolvidos ...
parâmetro de escopo [bool ou objeto]
O parâmetro de escopo é opcional e pode ser definido como true ou um objeto. O valor padrão é falso.
Se várias diretrizes em um elemento use o escopo de isolamento, apenas uma delas poderá entrar em vigor. Somente o elemento raiz no modelo de diretiva pode obter um novo escopo. Portanto, o escopo é definido como true por padrão para esses objetos. A função do controlador NG da diretiva interna é herdar do escopo dos pais e criar um novo escopo filho. Cria um novo escopo de crianças herdado do escopo dos pais. A herança aqui não será descrita em detalhes e é basicamente a mesma que a herança na orientação de objetos.
Primeiro, vamos analisar um pedaço de código:
<div ng-app = "App" ng-init = "name = 'avfather'"> <div ng-init = "nome = 'pai'"> Primeira geração: {{name}} <div ng-init = "nome = 'SON'" NG-CONTROLLER = "SOMECONTROLLER"> Segunda generação: {{{{Nome '} {{name}} </div> </div> </div> </div> </div> </div>Descobrimos que a primeira geração, inicializamos o nome como pai, mas a segunda geração e a terceira geração são realmente o mesmo escopo, então o nome deles é realmente um objeto, então o efeito disso é o seguinte:
Primeira geração: Pai
Segunda geração: neto
Terceira geração: neto
Estamos modificando o código para isolar a terceira geração e depois verificar o efeito:
<div ng-app = "app" ng-init = "name = 'avô'"> <div ng-init = "name = 'pai'"> primeira geração: {{name}} <div ng-init = "name = 'SON'" NG-CONTROLLER = "SOMECONTROLLER"> Segunda generação: {{{}}} ng-controller = "SecondController"> Terceira geração: {{name}} </div> </div> </div> </div> </div> </div> Angular.Module ('App', []) .Controller ('SOMECONTROLLER', function ($ SCOPE) {}) .Controller ('SecondController', função ($ scope) {})Os efeitos são os seguintes:
Primeira geração: Pai
Segunda geração: filho
Terceira geração: neto
Depois de modificar o código, vamos dar uma olhada na herança:
<div ng-App = "App" ng-init = "name = 'Grandfather'"> <div> Primeira geração: {{name}} <div ng-CONTROLLER = "SOMECONTROLLER"> Segunda geração: {{name}} <div ng-controller = "SecondController"> wustreation: {{name}} <ng --Controller = "SecondController"> wustreation: {{name}} <ng --Controller = "SecondController"> </div> </div> </div>Os efeitos são os seguintes:
A primeira geração: beijo do avô
A segunda geração: beijo do avô
A terceira geração: beijo do avô
Se você deseja criar uma diretiva que possa herdar o escopo a partir de um protótipo externo e definir a propriedade SCOPE como TRUE, é simplesmente um isolamento herdável, ou seja, não pode afetar reversamente o escopo dos pais.
Vamos dar uma olhada em outro exemplo:
angular.module ('myApp', []) .Controller ('MainController', function ($ scope) {}) .Directive ('myDirective', function () {return {restrt: 'a', scope: false, // switch para {}, minha verdadeira prioridade: 100,} ng-model = "myProperty"/> </div> '};Código HTML:
<Div ng-Controller = 'MainController' ng-init = "myProperty = 'Hello World!'"> Externo: {{myProperty}} <input ng-model = "myProperty"/> <div my-Direction> </div> </div>Quando mudarmos o valor do escopo, encontraremos
Falso: herdar, mas não isolar
Verdadeiro: herdar e isolar
{}: Isolado e não herdado
translude
Transclude é um parâmetro opcional. O valor padrão é falso. A incorporação é frequentemente usada para criar componentes reutilizáveis, um exemplo típico é uma caixa de diálogo modal ou uma barra de navegação. Podemos passar todo o modelo inteiro, incluindo as instruções, em uma instrução incorporando -o. O interior da diretiva pode acessar o escopo da diretiva externa, e o modelo também pode acessar os objetos de escopo externo. Para passar o escopo, o valor do parâmetro de escopo deve ser definido como isolado o escopo por {} ou true. Se o parâmetro de escopo não estiver definido, o escopo dentro da diretiva será definido para o escopo do modelo de entrada.
Use TransClude: True Somente apenas se você deseja criar uma diretiva que possa conter qualquer conteúdo.
Vejamos dois exemplos - barra de navegação:
<Div-box lateral> <div> <a href = ""> gráficos </a> <a href = ""> ng </a> <a href = ""> d3 </a> <a href = ""> front-end </a> <a href = ""> startup </a> </div> </div>
Jscode:
Angular.module ('myApp', []) .Directive ('Sidebox', function () {return {restrito: 'ea', escopo: {title: '@'}, translate: true, modelo: '<div> <div> <h2>' + '{}}}} </h2> ngnts ngntsEste código diz ao compilador NG para colocar o que recebe do elemento DOM, onde descobre a diretiva NG-Transclude.
Vejamos um exemplo do site oficial:
angular.module ('docsisofnbindexample', []) .Controller ('Controller', ['$ scope', '$ timeout', function ($ scope, $ timeout) {$ scope. $ nome = 'TOBIAS'; $ scope.hidedials = function () {$ scope.Dial.Dialoghdenden; }, 2000);My-Dialog-Close.html
My-Dialog-Close.html <div> <a href ng-click = "Close ()"> × </a> <div ng-transclude> </div> </div>
index.html
<Div ng-controller = "Controller"> <my-Dialog ng-hide = "dialogishdidden" em close = "hidedialog ()"> confira o conteúdo, {{name}}! </ meu-dialog> </div>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.
Controlador [string ou função]
O parâmetro do controlador pode ser uma string ou uma função. Quando definido como uma sequência, o construtor do controlador registrado no aplicativo será encontrado com o valor da string como o nome.
angular.module ('myApp', []) .Directive ('myDirection', function () {restrito: 'a', controlador: 'SomeController'})Um controlador embutido pode ser definido através de um construtor anônimo dentro da instrução.
angular.module ('myApp', []) .Directive ('myDirection', function () {restrito: 'a', controlador: function ($ scope, $ element, $ attrs, $ transclude) {// A lógica do controlador é colocada aqui}});Podemos injetar qualquer serviço NG que possa ser injetado no controlador e podemos usá -lo nas instruções. Existem também alguns serviços especiais no controlador que podem ser injetados nas instruções. Esses serviços incluem:
1. $ SCOPE
O escopo atual associado ao elemento diretivo.
2. $ Elemento
O elemento correspondente à instrução atual.
3. $ Atts
Um objeto composto por atributos do elemento atual.
<div id = "adiv" class = "box"> </div> tem o seguinte objeto de atributo: {id: "adiv", classe: "box"}4. $ Transclude
A função de link incorporado será prebatida com o escopo de incorporação correspondente. A função de link Transclude é uma função que é realmente executada para clonar elementos e operar o DOM.
angular.module ('myApp', []) .Directive ('myLink', function () {return {restrito: 'ea', transclude: true, controlador: function ($ scope, $ element, $ attrs, $ transclude) {$ transclude (function) {var a = angular.EMEMENT ('a> {$; a. }) ;;html
<my-link value = "http://www.baidu.com"> Baidu </my-link>
<div my-link value = "http://www.google.com"> google </div>
Recomenda -se usar transcludeFN apenas em parâmetros de compilação. A função de link pode isolar as instruções uma da outra, enquanto o controlador define comportamento reutilizável. Se quisermos expor a API da instrução atual a outras instruções, podemos usar o parâmetro do controlador; caso contrário, podemos usar o link para construir a funcionalidade do elemento de instrução atual (ou seja, funções internas). Se usarmos o escopo. $ Watch () ou desejar interagir com elementos DOM em tempo real, o uso de links será uma escolha melhor. Com a incorporação, o escopo refletido pelo escopo no controlador pode ser diferente do que esperávamos. Nesse caso, o objeto $ SCOPE não pode ser garantido para ser atualizado normalmente. Quando você deseja interagir com o escopo na tela atual, você pode usar o parâmetro de escopo passado para a função Link.
Controlleras [string]
O parâmetro Controlleras é usado para definir o alias do controlador, para que o controlador possa ser referenciado na visualização sem injetar o escopo $.
<Div ng-controller = "MainController como main"> <input type = "text" ng-model = "main.name"/> <pan> {{main.name}} </span> </div>Jscode:
angular.module ('myApp', []) .Controller ('MainController', function () {this.name = "halower";});O alias do controlador permite o roteamento e as instruções para criar controladores anônimos. Essa habilidade pode criar objetos dinâmicos nos controladores, e o objeto é isolado e fácil de testar.
requer [string ou string []]
requer é uma string que representa o nome de outra instrução. Exigirá injetar o controlador na instrução que ele especifica e serve como o quarto parâmetro da função de link da instrução atual. O valor de uma string ou elemento de matriz é o nome da instrução que será usado no escopo da instrução atual. De qualquer forma, o compilador NG se referirá ao modelo da instrução atual ao procurar um subcontrolador.
Compilar 【Objeto ou função】
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. Normalmente, 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 compilada é 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.
link
Compilar: function (tele, tattrs, translatefn) {// TODO: Return function (escopo, ele, attrs) {// function};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.
ngmodel
Ele fornece uma API mais subjacente para processar dados no controlador. Esta API é usada para lidar com a ligação de dados, verificação, atualização do CSS e outras coisas que na verdade não operam o DOM. O controlador NGModel será injetado nas instruções junto com o NGModel, que contém alguns métodos. Para acessar o NGMODelController, você deve usar as configurações de necessidade.
Os elementos comuns usados pelo ngmodelController são os seguintes:
1. Para definir o valor de visualização no escopo, a função ngmodel. $ SetViewValue () precisa ser chamado.
O método $ setViewValue () é adequado para ouvir eventos personalizados em diretrizes personalizadas (como o uso de um plug -in jQuery com funções de retorno de chamada), e gostaríamos de definir $ ViewValue e executar loops de digerir quando o retorno de chamada for chamado.
angular.module ('myApp') .Directive ('myDirection', function () {return {requer: '? ngmodel', link: function (escopo, ele, attrs, ngmodel) {if (! ngmodel) return; Scope. $ Aplicar (função () {ngmodel. $ setViewValue (Data);}); }}; }); }}; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; }); }; });2. O método $ renderize pode definir o método de renderização específico da visão
3. Propriedades
1. $ ViewValue
A propriedade $ ViewValue detém a sequência real necessária para atualizar a visualização.
2. $ ModelValue
$ ModelValue é mantido pelo modelo de dados. $ ModelValue e $ ViewValue podem ser diferentes, dependendo se o oleoduto $ parser opera nele.
3. $ Parsers
O valor de $ parsers é uma variedade de funções, onde as funções são chamadas uma por uma na forma de pipelines. ngmodel O valor lido do DOM é passado para a função em $ parsers e é processado pelo analisador em sequência.
4. $ Formatters
O valor de $ formatters é uma variedade de funções chamadas uma a uma na forma de um pipeline quando o valor do modelo de dados muda. Não tem efeito no pipeline $ parser e é usado para formatar e converter valores a serem exibidos nos controles com esse valor limitado.
5. $ ViewChangelisteners
O valor de $ ViewChangelistenners é uma variedade de funções chamadas uma a uma na forma de um pipeline quando o valor na visualização muda. Com $ ViewChangelistenners, comportamentos semelhantes podem ser alcançados sem usar o $ Watch. Como o valor de retorno é ignorado, essas funções não precisam retornar valores.
6. $ erro
O objeto de erro $ contém o nome do validador que não passou a verificação e as informações de erro correspondentes.
7. $ Pristine
O valor de $ Pristine é booleano, que pode nos dizer se o usuário modificou o controle.
8. $ DIRTY
O valor de $ sujo é o oposto de $ primitivo, que pode nos dizer se o usuário interagiu com o controle.
9. $ válido
O valor de $ válido nos diz se existem erros no controle atual. O valor é falso quando há um erro e o valor é verdadeiro quando não há erro.
10. $ inválido
O valor de $ inválido nos diz se há pelo menos um erro no controle atual e seu valor é oposto de $ válido.
O exposto acima é a compilação das instruções e materiais de conhecimento sobre os angulares. Continuaremos a adicioná -los mais tarde. Obrigado pelo seu apoio a este site!