Pessoal estou tentando usar a diretiva ng-show
do AngularJS em uma aplicação Spring MVC, mas não estou conseguindo, simplesmente ela não está funcionando. Obs.: Eu estou usando o AngularJS normalmente, as outras diretivas, mas ng-show
e ng-hide
não funcionam, mesmo eu pegando o exemplo do site do AngularJS não funciona. Segue o que eu estou fazendo logo abaixo:
Na minha página .jsp eu faço isso:
<div ng-show="mostra">
<span>conteúdo para mostra ou esconder</span>
</div>
No meu controller eu defino o valor de mostra
da seguinte maneira:
$scope.mostra = false;
Dessa maneira pela documentação do AngularJS não era para mostra o conteúdo dentro da div
. Eu já importei os arquivos do AngularJS, inclusive, como eu disse anteriormente, eu estou usando o Framework para fazer o controle das minhas páginas, para exibir conteúdo nas minhas tabelas e etc. Então, não sei o porque dessa diretiva não está funcionando. Alguém pode me ajudar? Eu uso essas diretivas no Sublime Text e tudo funciona normalmente, nesse projeto estou usando o Eclipse.
Segue abaixo o código da página:
<div align="center">
<form action="{{action}}" id="formCaixaDizimo"
target="_blank">
<fieldset>
<legend>{{legenda}}</legend>
<table>
<tr>
<td colspan="10" style="background: aqua;">Selecione o nome da Igreja</td>
</tr>
<tr>
<td colspan="3">
<label for="igreja">Igreja: </label>
<select ng-change="selectTodasIgrejas()" ng-model="igreja" ng-options="igreja.igreja.nome for igreja in todasIgrejas">
<option value="">..Selecione...</option>
</select>
</td>
</tr>
<div ng-show="mostra">
<tr>
<td colspan="10" style="background: aqua;">Selecione o nome do
Membro</td>
</tr>
<tr>
<td>
<label for="membro">Membro: </label>
<select required="true" ng-change="selectMembroPorIgreja()" ng-model="membro" ng-options="membro.membro.nome for membro in membroPorIgreja">
<option value="">..Selecione...</option>
</select>
</td>
</tr>
</div>
</table>
</fieldset>
<button type="submit" class="btn btn-primary" ng-disabled="habilita">Pesquisar</button>
<button type="reset"class="btn btn-inverse">Limpar</button>
</form>
Segue o código do controller:
app.controller('geraCartaoMembro', function($scope, $http, MembroService, $log, $location) {
$scope.habilita = true;
$scope.mostra = false;
$http.get('ListaTodasIgrejas').success(function(data) {
$scope.todasIgrejas = data;
});
var idigreja = null;
var idmembro = null;
function listaMembro(idigreja) {
$scope.membroPorIgreja = MembroService.listaMembroParaGerarCartao({url: 'ListaMembroGeraCartao', idigreja: idigreja}, function() {
}, function(error) {
$scope.erroMembro = "Houver um problema na requisição do serviço. Tente mais tarde ou entre em contato com o administrador da aplicação";
});
};
if($location.url() == '/pesquisaCartaoMembroPorNome') {
$log.log($scope.mostra);
$scope.legenda = "Gerar cartão de membro de acordo com o nome da igreja e do membro";
$scope.selectTodasIgrejas = function() {
$scope.habilita = true;
idigreja = $scope.igreja.igreja.idigreja;
$log.log("idigreja: " + idigreja);
listaMembro(idigreja);
};
$scope.selectMembroPorIgreja = function() {
idmembro = $scope.membro.membro.idmembro;
$scope.action = "cartaoMembroPorNome/" + idigreja + "/" + idmembro;
$scope.habilita = false;
};
} else if ($location.url() == '/pesquisaCartaoMembro') {
$log.log($scope.mostra);
$scope.legenda = "Gerar cartão de membro de acordo com a igreja - gera de todos os membros da igreja selecionada";
$scope.selectTodasIgrejas = function() {
$scope.habilita = false;
idigreja = $scope.igreja.igreja.idigreja;
$scope.action = "cartaoMembro/" + idigreja;
};
}
});
No $routeProvider
é que eu determino o controller da página, segue como eu faço:
app.config(function($routeProvider) {
$routeProvider.when('/pesquisaCartaoMembroPorNome',{
templateUrl: '/igreja/views/dizimo/RelatorioDizimo.jsp',
controller: 'geraCartaoMembro'
});
$routeProvider.when('/pesquisaCartaoMembro',{
templateUrl: '/igreja/views/dizimo/RelatorioDizimo.jsp',
controller: 'geraCartaoMembro'
});
$routeProvider.otherwise({redirectTo: '/'});
}
div
dentro de umtable
. Adiv
só pode ficar dentro dotd
. Ou seja, é permitidotable > tbody > tr > td
, mas nãotable > tbody > div
.