Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1889 | grupo2 | 1 | <%@ page contentType="text/html;charset=UTF-8" language="java" %> |
| 2 | <%@ taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %> |
||
| 3 | <%@ taglib prefix="logic" uri="/WEB-INF/tlds/struts-logic.tld" %> |
||
| 4 | <html> |
||
| 5 | <head></head> |
||
| 6 | <body ng-app="BacoAngularApp"> |
||
| 7 | <jsp:include page="/layout/themes/scripts-default.jsp"/> |
||
| 8 | <jsp:include page="/layout/headerTools.jsp"/> |
||
| 9 | |||
| 10 | |||
| 11 | <div id="demoApp" ng-app="demoApp" ng-controller="demoAppController"> |
||
| 12 | |||
| 13 | |||
| 14 | <h1>Uso de Directivas com Templates</h1> |
||
| 15 | <p>Este exemplo mostra como deve ser usada uma template para podermos incluir uma função |
||
| 16 | de controlo especifica da template usando directivas</p> |
||
| 17 | <p>Mostra ainda que dentro da template o scope é uma fusão dos scopes da ngApp e da propria directiva</p> |
||
| 18 | <p>Mostra também como podemos escolher dinamicamente a template ou as funcionalidades dependendo de atributos que passamos à template</p> |
||
| 19 | <script> |
||
| 20 | |||
| 21 | var demoApp = angular.module('demoApp', []); |
||
| 22 | GLOBAL_BacoAngularAppDependencies.push('demoApp'); |
||
| 23 | |||
| 24 | |||
| 25 | //demoApp..directive('tpl', function() { |
||
| 26 | //ou |
||
| 27 | angular.module('demoApp').directive('tpl', function() { |
||
| 28 | |||
| 29 | return { |
||
| 30 | restrict: 'E', //A ou E define se é o nome do elemento ou um atributo |
||
| 31 | link: function(scope, element, attrs) { |
||
| 32 | // concatenating the directory to the ver attr to select the correct excerpt for the day |
||
| 33 | |||
| 34 | |||
| 35 | |||
| 36 | scope.teste = "teste"; |
||
| 37 | scope.move = function(){ |
||
| 38 | |||
| 39 | scope.teste = "teste2"; |
||
| 40 | scope.testeSuper = "testeSuper2"; |
||
| 41 | } |
||
| 42 | }, |
||
| 43 | // passing in contentUrl variable |
||
| 44 | templateUrl: function(elem,attrs) { |
||
| 45 | return attrs.templatename; |
||
| 46 | } |
||
| 47 | } |
||
| 48 | }); |
||
| 49 | |||
| 50 | |||
| 51 | demoApp.controller('demoAppController', function ($scope) { |
||
| 52 | |||
| 53 | |||
| 54 | $scope.testeSuper = "testeSuper"; |
||
| 55 | |||
| 56 | } |
||
| 57 | ); |
||
| 58 | |||
| 59 | </script> |
||
| 60 | |||
| 61 | <p>campo testeSuper no mainmodule {{testeSuper}}</p> |
||
| 62 | |||
| 63 | <p>Se incluirmos o tpl2.html apenas vamos ter acesso às variaveis do scope da aplicação, neste caso o teste, a template pode estar declarada fora da app, não há problema</p> |
||
| 64 | <p>Por acaso neste exemplo temos acesso ao testeSuper porque a directiva adiciona funcionalidade ao scope da aplicação onde é chamada, mas se não chamarmos nenhuma directiva |
||
| 65 | a var testeSuper não aparece</p> |
||
| 66 | <div ng-include="'tpl2.html'"></div> |
||
| 67 | |||
| 68 | |||
| 69 | <h2>Invocando a tpl de html com directiva</h2> |
||
| 70 | <tpl templatename="tpl.html"></tpl> |
||
| 71 | |||
| 72 | <h2>Invocando a tpl de de javascript com directiva</h2> |
||
| 73 | <tpl templatename="tpl2.html"></tpl> |
||
| 74 | |||
| 75 | |||
| 76 | |||
| 77 | |||
| 78 | |||
| 79 | |||
| 80 | </div> |
||
| 81 | |||
| 82 | |||
| 83 | |||
| 84 | <!--TEMPLATE RECURSIVO--> |
||
| 85 | <script type="text/ng-template" id="tpl2.html"> |
||
| 86 | <div> |
||
| 87 | <h1>Usando um template de Script</h1> |
||
| 88 | <p>TESTE</p> |
||
| 89 | <p>{{teste}}</p> |
||
| 90 | <p>{{testeSuper}}</p> |
||
| 91 | <button ng-click="move()">Muda Textos</button> |
||
| 92 | </div> |
||
| 93 | </script> |
||
| 94 | </body> |
||
| 95 | </html> |