O AngularJS suporta propriedades de tag definidas pelo usuário e adicionam conteúdo personalizado sem usar operações de nó DOM.
As quatro principais características dos angulares são mencionadas anteriormente:
1 MVC
2 modular
3 instruções
4 Videira de dados bidirecional
O seguinte será introduzido:
1 Como personalizar o comando
2 Uso de instruções personalizadas
3 Uso embutido de diretrizes personalizadas
Como personalizar diretrizes:
Angular é uma estrutura baseada em módulo, então você deve criar seu próprio módulo:
var myAppmodule = angular.module ("myApp", []);
Em seguida, crie a diretiva neste módulo
myAppmodule.directive ("xingoo", function () {return {restrtri: 'aecm', modelo: '<div> olá minha diretiva </div>', substituição: true}});Entre eles, o Xingoo está o nome da nossa tag personalizada, seguida por sua função de método.
A função retorna uma combinação de pares de valor-chave, que define os métodos de uso, propriedades etc. da tag.
Vamos ver o que ele define:
1 restringir: define os métodos de uso das tags, com um total de quatro tipos, a saber, aecm
2 Modelo: Defina o modelo para a tag. Inside há uma string usada para substituir tags personalizadas
3 Substituição: se deve apoiar a substituição
4 Transclude: se deve suportar incorporado
Como usar o comando:
As quatro maneiras mencionadas acima de usar rótulos, como AECM.
Um atributo: usado como atributo
<d Div Xingoo> </div>
E Elemento: Usado como um elemento de etiqueta
<Xingoo> </xingoo>
CLASSE C: Usado como estilo CSS
<div> </div>
M Comentários Comentários: Usado como comentários (este método não está disponível na versão 1.2!)
<!-Diretiva: Xingoo->
<div> </div>
De um modo geral, é recomendável usá -lo como atributos e elementos.
Quando você deseja estender atributos nas tags HTML existentes, use o método de atributo.
Quando você deseja personalizar a tag, assuma a forma de uma tag.
Para usar esse método, você deve declarar a letra correspondente na restrição da diretiva de definição.
Uso em linha de diretrizes:
Como outras tags podem ser aninhadas dentro da tag, se você deseja aninhar outras tags de elemento em uma tag personalizada, você precisa:
1 Use a propriedade Transclude, definida como true.
2 e use a propriedade NG-Transclude para definir o local interno aninhado.
O código é o seguinte:
myAppmodule.directive ("test", function () {return {restrtri: 'aecm', tradução: true, modelo: "<div> haha! <div ng-transclude> </div> wuwu! </div>"}});Todos os códigos
<! doctype html> <html ng-app = "myApp"> <head> <meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </ad Head> <body> <xingoo> </sicingoo> <d xingoo> </div> <div> </div> <!-scretive: xingoo> <d Xingoo> </div> <div> </div> <! <Xingoo> 3333 </xingoo> <hr> <test> 4444 </stest> <script type = "text/javascript"> var myAppmodule = angular.module ("myApp", []); myAppmodule.directive ("xingoo", function () {return {restrtri: 'aecm', modelo: '<div> olá minha diretiva </div>', substituição: true}}); myAppmodule.directive ("test", function () {return {restrive: 'aecm', transclude: true, modelo: "<div> haha! <div ng-transclude> </div> wuwu! </div>"}}); </script> </body> </html>Resultados de execução
O exposto acima estão as informações que classificam as diretivas personalizadas do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!