Criando Diretivas

Diretivas – CustomizadasHTML vs Diretivas

Parte mais atrativa do AngularJS

HTML muito mais claro e

compreensível

Resume tsunami de tags para linguagem de

domínio específico

                              

<muitas-divs>     Conteudo </muitas-divs>

<div><div><div>       <div><div><div>             <div><div><div>                          Conteudo             </div></div></div>        </div></div></div> </div></div></div>

Diretivas – CustomizadasPrimeira diretiva

Assim como controllers, diretivas são registradas no angular através de um módulo.

Tudo o que precisa fazer é retornar um objeto que será interpretado pelo framework

app.directive('alert', function() {             return { restrict: 'EA',                 template:'<h2>Hello angular-directives</h2'             };         });

Diretivas – CustomizadasRestrict

Define como ela será declarada

Deve ser uma simples string representando o tipo de declarativa

Pode escolher um tipo ou fazer combinações

Elemento:

restrict: 'E',

<alert/>

Atributo:

restrict: 'A',

<div alert><div/>

Classe:

restrict: 'C',

<div class="alert"><div/>

Misto:

restrict: 'EA',

<alert alert/>

Diretivas – CustomizadasTemplate / templateUrl Basicamente inclui o template apontado no conteúdo do elemento.

     return {          template:'<h2>Hello angular-directives</h2>',          templateUrl:'alert-template.html'      };

Diretivas – CustomizadasTransclude

Permite adicionar conteúdo dentro do elemento da diretiva

      return {         transclude:true,             };     

<alert type="warning">         <strong>Aviso!</strong> Pague a conta de luz!     </alert>

<div>         Conteudo: <div ng-transclude></div>     </div>

Diretiva: Template:

View: Output:

Diretivas – CustomizadasReplace

Na renderização do HTML, substitui o elemento por seu conteúdo.

    return {        replace:true,     }; });

Diretiva: Output:

Diretivas – CustomizadasLink

Praticamente o controlador da diretiva

“Liga” o DOM ao escopo da diretiva

    return {        link:function(scope, element, attributes) {             

        }     };

Diretivas – CustomizadasLink

Parametros Scope ElementAttribute

s

    return {        link:function(scope, element, attributes) {             var type = attributes.type;             element.addClass('alert-' + type);         }     };

Diretivas – CustomizadasScope

Porta-

voz

Strings “@”

Objetos “=”

Functions “&”

    return {       scope:{}     }; });

Diretivas – CustomizadasScope - strings

Para passar uma string para a diretiva, este deve ser declarado no scope com a chave “@”;

  scope: {      type:'@'  }

Diretiva:

<div class ="alert alert-{{type}}"></div>

Template:

<alert type="warning"></alert>

View:

Diretivas – CustomizadasScope - strings

app.directive('alert', function() {     return {         restrict: 'E',         templateUrl: 'alert-template-scope.html',         transclude: true,         scope: {            type:'@'        }      }; });

Diretiva:app.controller('avisoController', function() {           this.avisos = [               {type:'warning', titulo: 'Aviso',  descricao: 'Pague a conta de luz!' },               {type:'danger', titulo: 'Perigo',  descricao: 'Pague o aluguel!' },               {type:'info', titulo: 'Info',  descricao:'PH está terminando'}           ];       });

Controller:

<div class ="alert alert-{{type}}">     <button type="button"class="close">&times;</button>     <div ng-transclude></div>     <label>Resposta:</label>     <input ng-model="resposta" /> </div>

Template: <div ng-controller="avisoController as vm">     <div ng-repeat="item in vm.avisos">         <alert type="{{item.type}}">             <strong>{{item.titulo}}</strong>  {{item.descricao}}         </alert>     </div> </div>

View:

Diretivas – CustomizadasScope - objetos

Para passar uma propriedade do controller esta deve ser declarada no scope com a chave “=”;

app.directive('alert', function() {           return {               restrict: 'E',               templateUrl: 'alert-template-scope.html‘,               scope: {                    aviso: '=',              }           };       });

<div ng-repeat="item in vm.avisos">            <alert aviso="item"></alert>         </div>

<div class ="alert alert-{{aviso.type}}">     <div> <strong>{{aviso.titulo}}</strong>  {{aviso.descricao}} </div></div>

Diretiva: Template:

View:

Diretivas – CustomizadasScope - funtions

Para passar uma função, esta deve ser declarado no scope com a chave “&”;

   scope: {       logtype:'&'   }

        <alert aviso="aviso"  logtype="vm.logAlert(aviso.descricao)"> </alert>     

<div class ="alert alert-{{aviso.type}}">    <button ng-click="logtype()">Log</button> </div>

self. logAlert = function (text) {               alert(text);           };

Diretiva: Controller:

View: Template:

Action-button

Wesley A.LemosLages/SC - 2014