Latest web development tutorials

AngularJS directivas

A nova propriedade é chamado por directivas AngularJS para estender HTML.

AngularJS instruções internas para a aplicação para adicionar funcionalidade.

AngularJS permite personalizar instrução.

AngularJS directivas

AngularJS instrução é uma extensão do HTML atributos com o GN-prefixo.

instruções ng-app para inicializar um aplicativo AngularJS.

comando ng-init para inicializar os dados da aplicação.

NG-modelo comandar os valores de elementos (tais como o valor do campo de entrada) ligadas à aplicação.

As instruções completas podem ser encontradas no conteúdo do manual de referência AngularJS .

AngularJS exemplos

<div ng-app="" ng-init="firstName='John'">

<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="firstName"></p>
<p>你输入的为： {{ firstName }}</p>

</div>

tente »

directiva ng-app diz AngularJS, <div> elemento é a aplicação AngularJS do "dono".

nota Uma página da Web pode conter múltiplas aplicações AngularJS funcionamento em diferentes elementos.

Ligação de dados

No exemplo acima, {{}} firstName AngularJS expressão é uma expressão de ligação de dados.

AngularJS ligações de dados sincronizados com AngularJS AngularJS dados de expressão.

{{FirstName}} por NG-model = "firstName" sincronização.

No próximo exemplo, campo de dois texto é calculado através de dois sincronização instrução ng-modelo:

AngularJS exemplos

<div ng-app="" ng-init="quantity=1;price=5">

<h2>价格计算器</h2>

数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">

<p><b>总价：</b> {{ quantity * price }}</p>

</div>

tente »

nota Use ng-init não é muito comum. Você vai aprender a ser a melhor maneira para inicializar os dados no capítulo controlador.

elementos HTML de repetição

instruções ng-repeat repete um elemento HTML:

AngularJS exemplos

<Div ng-app = "" ng-init = "nomes = [ 'Jani', 'Hege', 'Kai']">
<P> Use ng-repita para percorrer a matriz </ p>
<Ul>
<Li ng-repeat = "x em nomes">
{{X}}
</ Li>
</ Ul>
</ Div>

tente »

instruções ng-repeat é usado em uma variedade de objetos:

AngularJS exemplos

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

tente »

nota AngularJS CRUD perfeito banco de dados de suporte (aumentar a criar, ler Read, Update Update, Delete Apagar) aplicações.
Pense em exemplos de objetos em registros no banco de dados.

directiva ng-app

directiva ng-app define a raiz do aplicativo AngularJS elemento.

instruções ng-app quando a página é carregada iniciado automaticamente aplicações (inicialização automática).

Mais tarde você vai aprender a NG-app por um valor (por exemplo, ng-app = "MyModule"), ligada ao módulo de código.

ng-init comando

ng-init aplicação AngularJS instrução define o valor inicial.

Em circunstâncias normais, não use ng-init. Você vai usar um controlador ou módulo para substituí-lo.

Mais tarde você vai saber mais sobre os controladores e módulos.

directiva ng-modelo

ng-modelo de elementos directiva ligamento HTML para os dados do aplicativo.

directiva ng-modelo também pode:

  • Fornecer uma verificação do tipo de dados da aplicação (número, email, obrigatório).
  • Fornece o status para os dados do aplicativo (inválidas, sujo, tocado, erro).
  • Fornecer classes CSS para elementos HTML.
  • elementos HTML se ligam ao formulário HTML.

ng-repeat instrução

instruções ng-repeat para a coleta (array) de cada item irá clonar um elemento HTML.


Criar um comando personalizado

AngularJS Além das instruções internas, também podemos criar comandos personalizados.

Função.directive você pode usar para adicionar comandos personalizados.

Para chamar um comando personalizado, você precisa adicionar um nome de comando personalizado no elemento HTML.

Use método de corcunda para citar umadirectiva, w3bigDirective, mas quando você precisa usá-lo -segmentação, w3big-directiva:

AngularJS exemplos

<Body ng-app = "myApp ">

<W3big-directiva> </ w3big -directive>

<Script>
var app = angular.module ( "myApp", []);
app.directive ( "w3bigDirective", function () {
retornar {
template: "<h1> Instrução </ h1>!"
};
});
</ Script>

</ Body>

tente »

Você pode chamar a instrução das seguintes maneiras:

  • nome do elemento
  • propriedade
  • O nome da classe
  • nota

A seguir, a título de exemplo podem produzir o mesmo resultado:

nome do elemento

<W3big-directiva> </ w3big -directive>

tente »

propriedade

<Div w3big-directiva> </ div>

tente »

O nome da classe

<Div class = "w3big-directiva "> </ div>

tente »

nota

<- Instrução :! W3big-directiva ->

tente »

Restrições ao Emprego

Você pode limitar a sua instrução só pode ser invocada por um caminho particular.

Exemplos

Ao adicionarrestringir propriedade e definir o valor somente "A" , para definir o comando só pode ser chamado por meio de propriedade:

var app = angular.module ( "myApp" , []);
app.directive ( "w3bigDirective", function ( ) {
retornar {
restringir: "Um",
template: "<h1> Instrução </ h1>!"
};
});

tente »

restringir o valor pode ser a seguinte:

  • E é usado como o nome do elemento
  • A utilização como um atributo
  • C é utilizado como o nome de classe
  • M como um comentário

restringir o padrão é EA , que pode ser invocado pelo elemento de comando e nomes de atributos.