Diretiva, eu entendo isso como uma maneira de o AngularJS manipular elementos HTML.
Como a primeira etapa no aprendizado do AngularJS é escrever a instrução embutida ng-app para indicar que o nó é o nó raiz do aplicativo, as instruções já estão familiarizadas.
Esse log simplesmente registra algumas instruções internas, primeiro use-o e depois fale sobre algumas coisas interessantes.
Comandos embutidos
Todas as diretivas internas têm prefixos de NG e não é recomendável usar esse prefixo para diretivas personalizadas para evitar conflitos.
Comece com algumas instruções incorporadas comuns.
Primeiro, liste algumas instruções embutidas importantes e fale brevemente sobre questões de escopo.
Modelo Ng
Essa explicação não parece estar correta ao vincular o controle de forma às propriedades do escopo atual.
Mas não se preocupe em ser mastigável, é fácil de entender ao usar, por exemplo:
A cópia do código é a seguinte:
<input type = "text" ng-model = "somemodel.womeproperty" /> <br>
{{somemodel.womeproperty}}
ng-init
Esta diretiva é chamada de escopo interno inicializado.
Esta instrução geralmente aparece em aplicações menores, como dar uma demonstração ou algo assim ...
A cópia do código é a seguinte:
<div ng-init = "Job = 'Fighter'">
Eu sou A/an {{job}}
</div>
Além do NG-Init, temos mais e melhores opções.
ng-app
Toda vez que você usa o AngularJS, esse comando é inseparável dele. A propósito, o $ Rootscope está incluído.
Declara o elemento NG-App para se tornar o ponto de partida do $ RootsCope, que é a raiz da cadeia de escopo, que geralmente é declarada em <html> que você entende.
Ou seja, pode ser acessado pelo escopo sob a raiz.
No entanto, não é recomendável usar demais o $ Rootscope para evitar variáveis globais voando por todo o céu, tornando a eficiência pobre e difícil de gerenciar.
Aqui está um exemplo:
A cópia do código é a seguinte:
<html ng-app = "myApp">
<Body>
{{algumproperty}}
</body>
<Cript>
var myApp = angular.module ('myApp', [])
.run (função ($ rootcope) {
$ rootscope.womeproperty = 'hello Computer';
});
</script>
</html>
controlador ng
Usamos esta instrução para instalar o controlador em um elemento DOM.
Um controlador? De fato, é bom entender isso literalmente, então por que precisamos de um controlador?
Lembre -se de que quando o AngularJS 1.2.x, você também pode definir controladores como este ...
A cópia do código é a seguinte:
função ohmycontroller ($ scope) {
// ...
}
Este método é proibido no AngularJS 1.3.x porque esse método fará com que os controladores voem por todo o céu, e você não pode dizer a diferença entre os níveis e tudo está pendurado em $ Rootscope ...
O controlador NG deve ter uma expressão como um parâmetro e, além disso, os métodos e propriedades do escopo anterior são herdados através do $ SCOPE, e o $ Rootscope também está incluído.
A seguir, é apenas um exemplo simples, o ancestral não pode acessar o escopo da criança.
A cópia do código é a seguinte:
<div ng-controller = "ancestorcontroller">
{{ancestorname}}
{{ChildName}}
<div ng-controller = "Childcontroller">
{{ancestorname}}
{{ChildName}}
</div>
</div>
<Cript>
var myApp = angular.module ('myApp', [])
.Controller ('Childcontroller', função ($ scope) {
$ SCOPE.CHILDNAME = 'Child';
})
.Controller ('AncestorController', função ($ scope) {
$ scope.ancestorname = 'ancestor';
});
</script>
O problema do escopo é muito mais do que isso. Vamos deixá-lo de lado por enquanto e continuar analisando outras instruções internas.
ng-forma
No começo, eu não entendi por que havia um comando de forma, e a tag <morm> parecia o suficiente.
Assumindo a verificação do formulário como exemplo, há um pedaço de código no artigo anterior:
A cópia do código é a seguinte:
<input type = "submite" ng-disabled = "mainform. $ inválido" />
Ou seja, quando o status do formulário é $ inválido, o botão Enviar está desativado.
Se a cena for um pouco mais complicada, por exemplo, existem vários formulários filhos na forma pai e o formulário pai pode ser enviado quando 3 do formulário filho passarem a verificação.
No entanto, <morm> não pode ser aninhado.
Considerando esse cenário, usamos a diretiva NG-Form para resolver esse problema.
Por exemplo:
A cópia do código é a seguinte:
<name de forma = "Mainform" Notalidate>
<div ng-form = "form1">
Nome: <input type = "text" ng-required = "true" ng-model = "name"/> <br>
Número de identificação: <input type = "número" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "idnum"/>
</div>
<br>
<div ng-form = "form2">
Nome do Guardian: <input type = "text" ng-required = "true" ng-model = "gname"/> <br>
Número de identificação do Guardian: <input type = "número" ng-minlength = "15" ng-maxlength = "18" ng-required = "true" ng-model = "gidnum"/>
</div>
<botão ng-disabled = "Form1. $ inválido && form2. $ inválido"> envie todos </butão>
</morm>
ng-Disabled
Para atributos como esse que entram em vigor o tempo que aparecerem, podemos torná -lo eficaz no AngularJS retornando o valor true/false pelo valor de retorno da expressão.
Desative os campos de entrada de formulários.
A cópia do código é a seguinte:
<textarea ng-disabled = "1+1 == 2"> 1+1 =? </sexttarea>
ng-readonly
Defina o campo de entrada do formulário como somente leitura retornando o valor true/false pela expressão.
Faça um exemplo e ele se torna somente leitura após 3 segundos.
A cópia do código é a seguinte:
<input type = "text" ng-readonly = "stoptheworld" value = "Stop the World After 3s"/>
.run (função ($ rootcope, $ timeout) {
$ rootscope.stoptheWorld = false;
$ timeout (function () {
$ rootscope.stoptheWorld = true;
}, 3000)
})
ng verificou
Isto é para <input type = "caixa de seleção" />, como ...
A cópia do código é a seguinte:
<input type = "Caixa de seleção" ng-checked = "someproperty" ng-init = "someproperty = true" ng-model = "someproperty">
NG selecionado
Para uso com <pution> em <select>, exemplo:
A cópia do código é a seguinte:
<Boel>
<input type = "Caixa de seleção" ng-model = "isfullStack">
Eu sou engenheiro de pilha cheia
</belt>
<select>
<pution> front-end </pption>
<pution> back-end </pption>
<Opção ng-selected = "IsfullStack"> Pilha completa !!! </pption>
</leclect>
ng-show/ng-hide
Mostre/oculte os elementos HTML de acordo com a expressão, observe que está oculto, não removido do DOM, por exemplo:
A cópia do código é a seguinte:
<div ng-show = "1+1 == 2">
1+1 = 2
</div>
<div ng-hide = "1+1 == 3">
Você não pode me ver.
</div>
ng-mudança
Não é o html's onxxx ou algo assim, mas ng-xxx.
Use em combinação com o modelo NG, tomando a mudança NG como exemplo:
A cópia do código é a seguinte:
<input type = "text" ng-model = "calc.arg" ng-change = "calc.result = calc.arg*2" />
<code> {{calc.result}} </code>
Ou, por exemplo, ng-opções
{{}}
De fato, esta também é uma diretiva. Talvez seja semelhante ao NG-Bind, mas pode ser visto quando a página torna um pouco mais lenta.
Além disso, o desempenho de {{}} é muito menor que NG-Bind, mas é muito conveniente de usar.
ng-bind
O comportamento da NG-Bind é semelhante a {{}}, exceto que podemos usar esta instrução para evitar o FOUC (flash de conteúdo não renderizado), ou seja, o tremor causado pela não renderização.
ng-cloak
Ng-Cloak também pode resolver o FOUC para nós. Ng-Cloak esconde elementos internos até que a rota chama a página correspondente.
ng-if
Se a expressão em ng-if for falsa, o elemento correspondente será removido do DOM em vez de ser oculto, mas ao revisar o elemento, você poderá ver que a expressão se torna um comentário.
Se a fase estiver oculta, você poderá usar o NG-HIDE.
A cópia do código é a seguinte:
<div ng-if = "1+1 === 3">
Este elemento não pode ser revisado
</div>
<div ng-hide = "1+1 == 2">
Pode ser revisado
</div>
ng-switch
Não importa se você o usa sozinho, aqui estão exemplos:
A cópia do código é a seguinte:
<div ng-switch em = "1+1">
<P ng-switch-default> 0 </p>
<p ng-switch-when = "1"> 1 </p>
<p ng-switch-when = "2"> 2 </p>
<p ng-switch-when = "3"> 3 </p>
</div>
ng-repeat
Não entendo que isso não é chamado de iterado. Em suma, é atravessar a coleção e gerar instâncias de modelo para cada elemento. Alguns atributos especiais podem ser usados no escopo de cada instância, como segue:
A cópia do código é a seguinte:
$ index
$ primeiro
$ last
$ Middle
Até
chance
Sem ter que explicar especificamente, é fácil ver para que servem. Aqui está um exemplo:
A cópia do código é a seguinte:
<ul>
<li ng-repeat = "char in
[{'alfabeto': 'k'},
{'alfabeto': 'a'},
{'alfabeto': 'v'},
{'alfabeto': 'l'},
{'alfabeto': 'e'},
{'alfabeto': 'z'}] "ng-show =" $ par "> {{char.alphabet}} </li>
</ul>
ng-href
No começo, fiz um modelo NG em um campo de texto e depois o escrevi em Href como este.
De fato, não há diferença entre HREF e NG-HREF, para que possamos tentar o seguinte:
A cópia do código é a seguinte:
<ul ng-init = "myhref = ''">
<li> <a ng-href = "{{myhref}}"> {{linkText}} </a> </li>
<li> <a href = "{{myhref}}"> clique, mas não necessariamente o endereço correto </a> </li>
</ul>
.run (função ($ rootcope, $ timeout) {
$ rootscope.linkText = 'Ainda não carregado, você não pode clicar';
$ timeout (function () {
$ rootscope.linkText = 'Clique em' Clique '
$ rootscope.myhref = 'http://google.com';
}, 2000);
})
ng-src
O mesmo é verdade, ou seja, o recurso não deve ser carregado antes que a expressão entre em vigor.
Exemplo (PS: A imagem é boa!):
A cópia do código é a seguinte:
<img ng-src = "{{imgsrc}}"/>
.run (função ($ rootcope, $ timeout) {
$ timeout (function () {
$ rootscope.imgsrc = 'https://octodex.github.com/images/daftpunktocat-guy.gif';
}, 2000);
})
NG-Class
Altere dinamicamente os estilos de classe com objetos no escopo, por exemplo:
A cópia do código é a seguinte:
<estilo>
.red {Background-Color: Red;}
.Blue {Background-Color: Blue;}
</style>
<div ng-controller = "CurtimeController">
<Button ng-click = "getCurrentSecond ()"> Obtenha tempo! </botão>
<p ng-class = "{vermelho: x%2 == 0, azul: x%2! = 0}"> número é: {{x}} </p>
</div>
.Controller ('CurtimeController', função ($ scope) {
$ scope.getCurrentSecond = function () {
$ scope.x = new Date (). getSeconds ();
};
})
O exposto acima é todo o conteúdo descrito neste artigo, espero que você goste.