/branches/grupo3/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/grupo3/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/grupo3/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/grupo3/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/grupo3/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> |