| /branches/grupo2/impl/src/web/examples/angular/directives/angular-directive.jsp |
|---|
| New file |
| 0,0 → 1,95 |
| <%@ page contentType="text/html;charset=UTF-8" language="java" %> |
| <%@ taglib prefix="bacoTags" tagdir="/WEB-INF/tags" %> |
| <%@ taglib prefix="logic" uri="/WEB-INF/tlds/struts-logic.tld" %> |
| <html> |
| <head></head> |
| <body ng-app="BacoAngularApp"> |
| <jsp:include page="/layout/themes/scripts-default.jsp"/> |
| <jsp:include page="/layout/headerTools.jsp"/> |
| <div id="demoApp" ng-app="demoApp" ng-controller="demoAppController"> |
| <h1>Uso de Directivas com Templates</h1> |
| <p>Este exemplo mostra como deve ser usada uma template para podermos incluir uma função |
| de controlo especifica da template usando directivas</p> |
| <p>Mostra ainda que dentro da template o scope é uma fusão dos scopes da ngApp e da propria directiva</p> |
| <p>Mostra também como podemos escolher dinamicamente a template ou as funcionalidades dependendo de atributos que passamos à template</p> |
| <script> |
| var demoApp = angular.module('demoApp', []); |
| GLOBAL_BacoAngularAppDependencies.push('demoApp'); |
| //demoApp..directive('tpl', function() { |
| //ou |
| angular.module('demoApp').directive('tpl', function() { |
| return { |
| restrict: 'E', //A ou E define se é o nome do elemento ou um atributo |
| link: function(scope, element, attrs) { |
| // concatenating the directory to the ver attr to select the correct excerpt for the day |
| scope.teste = "teste"; |
| scope.move = function(){ |
| scope.teste = "teste2"; |
| scope.testeSuper = "testeSuper2"; |
| } |
| }, |
| // passing in contentUrl variable |
| templateUrl: function(elem,attrs) { |
| return attrs.templatename; |
| } |
| } |
| }); |
| demoApp.controller('demoAppController', function ($scope) { |
| $scope.testeSuper = "testeSuper"; |
| } |
| ); |
| </script> |
| <p>campo testeSuper no mainmodule {{testeSuper}}</p> |
| <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> |
| <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 |
| a var testeSuper não aparece</p> |
| <div ng-include="'tpl2.html'"></div> |
| <h2>Invocando a tpl de html com directiva</h2> |
| <tpl templatename="tpl.html"></tpl> |
| <h2>Invocando a tpl de de javascript com directiva</h2> |
| <tpl templatename="tpl2.html"></tpl> |
| </div> |
| <!--TEMPLATE RECURSIVO--> |
| <script type="text/ng-template" id="tpl2.html"> |
| <div> |
| <h1>Usando um template de Script</h1> |
| <p>TESTE</p> |
| <p>{{teste}}</p> |
| <p>{{testeSuper}}</p> |
| <button ng-click="move()">Muda Textos</button> |
| </div> |
| </script> |
| </body> |
| </html> |
| /branches/grupo2/impl/src/web/examples/angular/directives/tpl.html |
|---|
| New file |
| 0,0 → 1,5 |
| <h1>Template de HTML</h1> |
| <p>TESTE</p> |
| <p>{{teste}}</p> |
| <p>{{testeSuper}}</p> |
| <button ng-click="move()">Muda Textos</button> |
| /branches/grupo2/impl/src/web/examples/angular/directives/angular-directive-module.jsp |
|---|
| New file |
| 0,0 → 1,36 |
| <%-- |
| Created by IntelliJ IDEA. |
| User: jorgemachado |
| Date: 11/11/17 |
| Time: 10:20 |
| To change this template use File | Settings | File Templates. |
| --%> |
| <%@ page contentType="text/html;charset=UTF-8" language="java" %> |
| <html> |
| <head> |
| <title></title> |
| </head> |
| <body ng-app="BacoAngularApp"> |
| <jsp:include page="/layout/themes/scripts-default.jsp"/> |
| <jsp:include page="/layout/headerTools.jsp"/> |
| <div class="container"> |
| <h1>Uso de Templates Generalizados e cada um com sua template</h1> |
| <p>O caso em questão é a existencia de um esqueleto principal para um modulo (mainmodule)</p> |
| <p>O main module inclui templates para cada componente usando o ng-include</p> |
| <p>Esse ng-include é referente ao campo @class de cada componente</p> |
| <p>vamos incluir esse esqueleto e todas as templates especificas dos nossos modulos</p> |
| <p>incluimos ainda as directivas que estiverem nos nossos modulos</p> |
| <p>o template do ng-include irá colocar a directiva desejada caso seja necessário</p> |
| <p>com a directiva podemos ter funcionalidade de scope associada ao subcomponente, que é desconhecido do main module</p> |
| <p>caso necessite o includemodule também tem acesso ao scope da app principal</p> |
| <p>o unico requesito é passar ao include module o nome da app onde ele vai inserir as directivas</p> |
| <jsp:include page="angular-directive-mainmodule.jsp"/> |
| <jsp:include page="angular-directive-includemodule.jsp"/> |
| </div> |
| </body> |
| </html> |
| /branches/grupo2/impl/src/web/examples/angular/directives/angular-directive-includemodule.jsp |
|---|
| New file |
| 0,0 → 1,60 |
| <%@ page contentType="text/html;charset=UTF-8" language="java" %> |
| <p>Modulo Incluido contem as directivas e os templates necessários</p> |
| <p>Este módulo conhece o nome do módulo da App onde vai ser incluido</p> |
| <script> |
| angular.module("demoApp").directive('tpl', function() { |
| var contentUrl; |
| return { |
| restrict: 'E', //A ou E define se é o nome do elemento ou um atributo |
| link: function(scope, element, attrs) { |
| // concatenating the directory to the ver attr to select the correct excerpt for the day |
| //contentUrl = attrs.templatename + '.html'; |
| //console.log(contentUrl); |
| scope.teste = "teste"; |
| scope.move = function(){ |
| scope.teste = "teste2modules"; |
| //scope.testeSuper = "testeSuper2modules"; |
| angular.element("#demoApp").scope().testeSuper = "testeSuper2modules"; |
| } |
| scope.mudaCompName = function(comp){ |
| comp.name = "NOVO NOME DO COMP MUDADO NA DIRECTIVA"; |
| } |
| }, |
| // passing in contentUrl variable |
| templateUrl: function(elem,attrs) { |
| return "templateDirectiva"; |
| } |
| } |
| }); |
| </script> |
| <script type="text/ng-template" id="directive_class"> |
| <div style="border: 1px solid #000000"> |
| <h1>DIRECTIVE CLASS TEMPLATE</h1> |
| <p>COMP ELEMENTO DIRECTIVA:{{comp.name}}</p> |
| <p><input type="text" ng-model="comp.name"></p> |
| <tpl></tpl> |
| <p>Teste no scope da directiva<p> |
| <pre> |
| {{teste | json}} |
| </pre> |
| </div> |
| </script> |
| <script type="text/ng-template" id="templateDirectiva"> |
| <div style="border: 1px solid green"> |
| <h1>templateDirectiva</h1> |
| <p>TESTE</p> |
| <p>{{teste}}</p> |
| <p>{{testeSuper}}</p> |
| <p>COMP ELEMENTO DIRECTIVA:{{comp.name}}</p> |
| <button ng-click="move()">Muda Textos</button> |
| <button ng-click="mudaCompName(comp)">Muda COMP NAME</button> |
| </div> |
| </script> |
| /branches/grupo2/impl/src/web/examples/angular/directives/angular-directive-mainmodule.jsp |
|---|
| New file |
| 0,0 → 1,50 |
| <div id="demoApp" ng-app="demoApp" ng-controller="demoAppController"> |
| <script> |
| var demoApp = angular.module('demoApp', []); |
| GLOBAL_BacoAngularAppDependencies.push('demoApp'); |
| demoApp.controller('demoAppController', function ($scope) { |
| $scope.testeSuper = "testeSuper"; |
| $scope.data = |
| { |
| comps : [ |
| { |
| "@class" : "directive_class", |
| "name" : "componente de teste" |
| } |
| ] |
| } |
| } |
| ); |
| </script> |
| <h1>Campo testeSuper no mainmodule "{{testeSuper}}"</h1> |
| <h1>Campo data.comps[0].name no mainmodule "{{data.comps[0].name}}"</h1> |
| <h2>Template chamado atraves de um template de classe intermedio</h2> |
| <div ng-repeat="comp in data.comps" ng-include="comp['@class']"> |
| </div> |
| <pre> |
| {{testeSuper | json}} |
| </pre> |
| <pre> |
| {{data | json}} |
| </pre> |
| </div> |
| /branches/grupo2/impl/src/web/user/courses/courseReportEdit.jsp |
|---|
| 331,7 → 331,7 |
| </div> |
| <!-- <pre class="code">{{ report | json }}</pre>--> |
| <pre class="code">{{ report | json }}</pre> |
| /branches/grupo2/impl/src/web/user/utils/documentsBuilder.jsp |
|---|
| 57,6 → 57,8 |
| </div> |
| <div> |
| </div> |
| </div> |
| </div> |
| </script> |
| <script type="text/ng-template" id="pt_estgp_estgweb_utils_documentBuilder_ImageComponent"> |
| 173,4 → 175,4 |
| </div> |
| </div> |
| </div> |
| </script> |
| </script> |