Construindo Diretivas com AngularJS

Rodrigo Branas – @rodrigobranas - http://www.agilecode.com.br
Criando Diretivas
com AngularJS

“Transformar equipes de desenvolvimento de software”
http://www.agilecode.com.br

Rodrigo Branas
rodrigo.branas@agilecode.com.br
http://www.agilecode.com.br
• Desenvolvendo Software na Gennera
• Criando treinamentos na Agile Code
• Escrevendo na Java Magazine e PacktPub
• Palestrando sobre desenvolvimento de
software em eventos, universidades e
empresas

Certificações
Formação Acadêmica
Ciências da Computação – UFSC
Gerenciamento de Projetos - FGV
SCJA, SCJP, SCJD, SCWCD, SCBCD, PMP, MCP e CSM
Experiência
Há mais de 12 anos desenvolvendo software na
plataforma Java com as empresas: EDS, HP, NET,
Citibank, GM, Dígitro, Softplan, OnCast, Senai,
VALE, RBS, Unimed, Globalcode, V.Office, Suntech,
WPlex e Gennera.

• Há mais de 5 anos liderando pessoas.
• Mais de 2000 horas em sala de aula.
• Mais de 100 apresentações em eventos.
• 6 artigos escritos para revistas.
• 1 livro.
• Mais de 500 profissionais treinados.
• Criação de 22 palestras.
• Criação de 10 treinamentos.
• Criação de mais de 3.000 slides.
O que realmente me motiva?

1. app.directive("nomeDaDiretiva", function () {
2. });
Registrando a diretiva no módulo

2. return {
3. };
4. });
Criando o Directive Definition Object

2. return {
3. // Propriedades da Diretiva
4. };
5. });
Adicionando propriedades ao Directive
Definition Object

Por dentro das propriedades para criação de
diretivas básicas
• template
• templateUrl
• replace
• restrict
• scope
• transclude

1. <html ng-app="listaTelefonica">
2. <head>
3. <script src='angular.js'></script>
4. <script>
5. var app = angular.module("listaTelefonica", []);
6. app.controller("listaTelefonicaCtrl", function ($scope) {
7. $scope.mensagem = "Por favor, preencha o campo nome e telefone";
8. });
9. </script>
10. </head>
11. <body ng-controller="listaTelefonicaCtrl">
12. <div class="alert">
13. <div class='alert-topic'>Ops, um problema aconteceu!</div>
14. <div class='alert-description'>{{mensagem}}</div>
15. </div>
16. </body>
17. </html>

template / templateUrl
Especifica o template ou a url do template
que deverá ser incluído dentro do elemento
que estiver utilizando a diretiva.

2. <head>
4. <script>
8. });
9. </script>
10. </head>
12. </body>
13. </html>

2. <head>
4. <script>
8. });
9. </script>
10. </head>
12. <div alert></div>
13. </body>
14. </html>

Diretiva antes da compilação

1. app.directive("alert", function () {
2. return {
3. };
4. });

2. return {
3. template:
4. };
5. });

2. return {
3. template:
4. "<div class='alert'>" +
5. "<div class='alert-topic'>Ops, um problema aconteceu!</div>" +
6. "<div class='alert-description'>{{mensagem}}</div>" +
7. "</div>"
8. };
9. });

2. return {
3. templateUrl: "alert.html"
4. };
5. });

1. <div alert="">
3. <div class="alert-topic">Ops, um problema aconteceu!</div>
4. <div class="alert-description">Por favor, preencha o campo nome e telefone</div>
5. </div>
6. </div>
Diretiva depois da compilação

replace
Substitui o elemento pelo conteúdo do
template.

2. return {
3. templateUrl: "alert.html",
4. replace: true
5. };
6. });

3. <div class="alert-description">Por favor, preencha o campo nome e telefone</div>
4. </div>

restrict
Restringe o modo de utilização da diretiva
ao atributo, elemento, classe e comentário,
ou ainda uma combinação deles.
Caso não seja definido, o padrão é que a
diretiva seja atribuída pelo atributo.

Tipos de restrição
A - Diretiva restrita ao atributo do elemento
E - Diretiva restrita ao elemento
C - Diretiva restrita a classe do elemento
M - Diretiva restrita ao comentário do elemento

Diretiva restrita ao atributo do elemento

2. return {
4. replace: true,
5. restrict: "A"
6. };
7. });

1. <alert></alert>
Diretiva restrita ao elemento

2. return {
4. replace: true,
5. restrict: "E"
6. };
7. });

1. <div class="alert"></div>
Diretiva restrita a classe do elemento

2. return {
4. replace: true,
5. restrict: "C"
6. };
7. });

1. 
2. <div></div>
Diretiva restrita ao comentário do elemento

2. return {
4. replace: true,
5. restrict: "M"
6. };
7. });

scope
Por padrão, uma diretiva compartilha o
mesmo scope de onde é utilizada.
Para aumentar seu potencial de reuso,
podemos isolar seu scope, passando os
dados necessário por parâmetro.

@
Vincula um atributo a uma
propriedade do scope da diretiva

1. <alert message="Por favor, preencha o campo nome e telefone">
2. </alert>

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. }
8. };
9. });

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "@message"
8. }
9. };
10. });

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "@"
8. }
9. };
10. });

=
Cria um vínculo bi-direcional entre
uma propriedade do scope do
template a uma propriedade do
scope da diretiva

1. <alert message="">
2. </alert>

1. <alert message="mensagem">
2. </alert>

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "=message"
8. }
9. };
10. });

2. return {
4. replace: true,
5. restrict: "E",
6. scope: {
7. message: "="
8. }
9. };
10. });

transclude
É possível encapsular elementos dentro de
uma diretiva.

1. <alert>
2. Por favor, preencha o campo nome e telefone
3. </alert>

2. return {
4. replace: true,
5. restrict: "E",
6. transclude: true
7. };
8. });

3. <div class="alert-description" ng-transclude></div>
4. </div>
alert.html

3. <div class="alert-description" ng-transclude>
4. Por favor, preencha o campo nome e telefone
5. </div>
6. </div>

Por dentro das propriedades das diretivas
para criação de diretivas avançadas
• link
• require
• controller
• compile

link
Por meio da função link, podemos interagir
com a DOM, vinculando eventos ou mesmo
executar um procedimento de inicialização
da diretiva.

1. <accordion-item title="Rodrigo Branas">
2. </accordion-item>
3. <accordion-item title="João da Silva">
5. <accordion-item title="Pedro Cavalcante">

2. Agile Code</br>
3. rodrigo.branas@agilecode.com.br</br>
4. http://www.agilecode.com.br</br>

2. Agile Code</br>
7. Google</br>
8. joao.silva@google.com</br>
9. http://www.google.com</br>

2. Agile Code</br>
7. Google</br>
12. Microsoft</br>
13. pedro.cavalcante@microsoft.com</br>
14. http://www.microsoft.com</br>

1. app.directive("accordionItem", function () {
2. return {
3. templateUrl: "accordion-item.html",
4. restrict: "E",
5. transclude: true,
6. replace: true,
7. scope: {
8. title: "@"
9. }
10. };
11. });

Parâmetros da função link
• scope
• element
• attrs
• controller
• transclude

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
10. link: function (scope, element, attrs, ctrl, transcludeFn) {
11. }
12. };
13. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
11. element.bind("click", function () {
12. });
13. }
14. };
15. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
12. scope.$apply(function () {
13. scope.showDescription = !scope.showDescription;
14. });
15. });
16. }
17. };
18. });

1. <div>
2. <div class='accordion-topic'>{{title}}</div>
3. <div class='accordion-description' ng-show='showDescription' ng-transclude>
4. </div>
5. </div>
accordion-item.html

require
Cria um vínculo com outra diretiva,
recebendo seu controller como parâmetro
na função link.

1. <accordion>
3. Agile Code</br>
8. Google</br>
13. Microsoft</br>
14. pedro.cavalcante@microsoft.com</br>
15. http://www.microsoft.com</br>
17. </accordion>

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
10. require: "^accordion",
15. });
16. });
17. }
18. };
19. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
13. ctrl.closeAllAccordionItens();
16. });
17. });
18. }
19. };
20. });

2. return {
4. restrict: "E",
6. replace: true,
7. scope: {
8. title: "@"
9. },
12. ctrl.addAccordionItemScope(scope);
14. ctrl.closeAllAccordionItens();
17. });
18. });
19. }
20. };
21. });

controller
Permite a criação e o compartilhamento de
comportamento com outras diretivas.

1. app.directive("accordion", function () {
2. return {
3. template: "<div ng-transclude></div>",
4. restrict: "E",
6. replace: true,
7. controller: function ($scope, $element, $attrs) {
8. var itensScope = [];
9.
10. var addAccordionItemScope = function (scope) {
11. itensScope.push(scope);
12. };
13.
14. var closeAllAccordionItens = function () {
15. angular.forEach(itensScope, function (scope) {
16. scope.showItem = false;
17. });
18. };
19.
20. return {
21. addAccordionItemScope: addAccordionItemScope,
22. closeAllAccordionItens: closeAllAccordionItens
23. };
24. }
25. };
26. });

Construindo Diretivas com AngularJS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Construindo Diretivas com AngularJS

Semelhante a Construindo Diretivas com AngularJS (20)

Mais de Rodrigo Branas

Mais de Rodrigo Branas (16)

Último

Último (9)

Construindo Diretivas com AngularJS