Blame | Last modification | View Log | RSS feed
<%@ 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>
Generated by GNU Enscript 1.6.5.2.