Introdução de fundo
Este exemplo é um exemplo no vídeo, há um super -homem dinâmico, com três habilidades, força de força, velocidade de velocidade, luz de brilho.
Essas três habilidades são usadas como três atributos e definem o Superman dinâmico como uma tag. Você pode ter essa habilidade adicionando os atributos correspondentes.
Para facilitar a exibição de resultados, adicione um evento de resposta ao mouse à tag. Quando o mouse se move para a tag correspondente, um método será acionado para imprimir os recursos que possui.
Análise do programa
O código da parte HTML é o seguinte:
<div> <pupman> nada! </pupman> <Superman Força> Força!
Vamos ver como implementá -lo. A primeira coisa é criar um módulo:
var myAppmodule = angular.module ("myApp", []);
Com base neste módulo, crie o Tag Superman, semelhante ao anterior.
myAppmodule.directive ("Superman", function () {return {scope: {}, restringir: 'ae', traduzir: true, modelo: "<div> <div ng-transclude> </div> </div>", controlador: function ($ scope) {scope.pacilities = []; }; });A diferença aqui é que existe um atributo do controlador dentro do método. Este não é um controlador como o controlador NG, mas uma interface de que as instruções estão abertas para o exterior. Os métodos declarados internos podem ser usados como métodos públicos externamente, e outras instruções podem usar esses métodos por meio de dependências.
Em seguida, crie três comandos correspondentes aos recursos
myAppmodule.directive ("forcent", function () {return {requer: '^Superman', link: function (escopo, elemento, att, supermanctrl) {supermanctrl.addstrourn ();}}}); myAppmodule.directive ("speed", function () {return {requer: '^Superman', link: function (escopo, elemento, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppmodule.Directive ("Light", function () {return {require: '^Superman', link: function (escopo, elemento, att, supermanctrl) {supermanctrl.addlight ();}}});Os códigos das três instruções são quase os mesmos, onde exigem especifica as instruções dependentes.
Há um supermanctrl de parâmetro adicional no link. Esse parâmetro é adivinhado como o controlador no Super -Homem, portanto o método de nomeação é o Superman+Ctrl.
[Como não entendo os princípios internos, isso é apenas um palpite, mas as experiências provaram que, se o nome desse parâmetro for alterado, um erro será relatado. 】
Depois de declarar essas três instruções, você pode usar essas três instruções como super atributos. Quando esse atributo for indicado, o método interno dentro do link será acionado e os métodos divulgados em Superman serão chamados.
Para resumir, o processo interativo de instruções:
Primeiro, crie uma diretiva básica e, após o atributo do controlador, adicione o método divulgado ao público.
2 Crie outras instruções interativas, adicione a dependência de instrução correspondente após o atributo requer; chame o método exposto no link
Todos os códigos de programa:
<! 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> <div> Speed! > luz de velocidade de força! myAppmodule.directive ("Superman", function () {return {scope: {}, restringir: 'ae', traduzir: true, modelo: "<div> <div ng-transclude> </div> </div>", controlador: function ($ scope) {scope.pacilities = []; }; }); myAppmodule.directive ("forcent", function () {return {requer: '^Superman', link: function (escopo, elemento, att, supermanctrl) {supermanctrl.addstrourn ();}}}); myAppmodule.directive ("speed", function () {return {requer: '^Superman', link: function (escopo, elemento, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppmodule.Directive ("Light", function () {return {require: '^Superman', link: function (escopo, elemento, att, supermanctrl) {supermanctrl.addlight ();}}}); </script> </body> </html>Resultados em execução:
O exposto acima são as informações sobre a interação das instruções do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!