O
Modal é uma forma de abrir um frame e carregar algum conteúdo como
imagem, formulário, aviso, vídeo, etc. Vou mostrar como usei o
modal para criar um form. É possível passar um objeto para o modal
e também receber um objeto no fechamento desse modal como no foi feito nesse caso.
Na
aplicação existe o HTML principal e o Controller dessa página
principal que é onde defini-se a aplicação (angular.module) e o
controller principal.
Vamos
primeiro ao controller. Nele eu criei uma função chamada
openPopup(item) a qual eu
irei invocar do meu HTML passando passando um item que
é um objeto criado e preenchido pelo angular no HTML. (Não vou
entrar em detalhes de como trabalhar com objetos no JavaScript e
Angular, basta dizer que
quando chamar essa função ele já existe e está preenchido).
Criação
do app:
angular.module('liberacaoApp',
[
'ui.bootstrap']
Criação
do Controller principal:
angular.module('liberacaoApp').controller('LiberacaoController',
LiberacaoController);
Injeção
das dependências no controlle:
LiberacaoController.$inject
= [
'$scope',
'$uibModal'];
Criação
da função controller com a função que abre o modal:
function
LiberacaoController($scope,
$uibModal){
var
_self =
this;
.
. .
/**
*
Abrir a
popup para
aprovar,
negar ou
detalhar um
liberação.
*/
_self.openPopup
=
function(item)
{
var
modalInstance
=
$uibModal.open({
animation
: true,
//Defino
o HTML que vou carregar no modal
templateUrl
:
'popupAprovacao.html',
//Defino
o Controller que vai ser responsável pelo HTML
controller
:
'PopupAprovacaoController',
//Defino
um alias para o controller
controllerAs
:
'popAprCtrl',
//posso
também definir um tamanho entre sm(small), md(middle) ou lg(large).
size: 'md',
//Passo
o item para o controller do Modal
resolve
: {
pendencia
:
function()
{
return
item;
}
}
});
//
Pego o OBJETO retornado do
Modal e uso
no controller principal e consecutivamente no HTML principal.
modalInstance.result.then(function(retorno)
{
_self.carregarResumo(retorno);
_consultarDetalhes(retorno);
});
}
//Restante
do meu controller principal...
.
. .
}
Na instância do modal quando passei
a seguinte propriedade: templateUrl
:
'popupAprovacao.html'
estava
dizendo qual arquivo HTML queria que o modal carregasse. Esse arquivo
está na mesma hierarquia do HTML pricipal. Segue um exemplo de parte
desse HTML.
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<!--
build:css -->
<link
href="css/bootstrap.css"
rel="stylesheet"
/>
<link
href="css/material-icons.css"
rel="stylesheet"
/>
<link
href="css/sb-admin-2.css"
rel="stylesheet"
/>
<link
href="css/font-awesome.css"
rel="stylesheet"
/>
<link
href="css/morris.css"
rel="stylesheet"
/>
<link
href="css/liberacao.css"
rel="stylesheet"
/>
<!--
endbuild -->
<meta
name="viewport"
content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div
style="padding-bottom:10px;padding-top:10px;">
<form>
<div
class="form-group
col-lg-6 col-md-6">
<label
class="labelDetalhe"
for="apNumOS">Número
OS</label>
<input
class="form-control"
value="{{::popAprCtrl.pendencia.itaSeqItemAtendimento}}" id="apNumOS"
type="text"
readonly="readonly"
/>
</div>
<div
class="form-group
col-lg-6 col-md-6">
<label
class="labelDetalhe"
for="apStatus">Status
Real</label>
<input
class="form-control"
value="{{::popAprCtrl.pendencia.enumStatus}}"
id="apStatus"
type="text" readonly="readonly"
/>
</div>
<!--Restante
do formulário-->
.
. .
</div>
</form>
<!--Botões-->
<div
class="direita"
id="botoesAprovacao"
style="padding-right:10px;">
<button
ng-click="popAprCtrl.voltar()"
class="btn
btn-default"><i
class="fa
fa-reply-all"></i></button>
<button
ng-click="popAprCtrl.negar()"
class="btn
btn-danger">Negar</button>
<button
ng-click="popAprCtrl.aprovar()"
class="btn
btn-success">Aprovar</button>
</div>
</div>
</body>
</html>
Note
que o arquivo HTML é escrito como qualquer outro, inclusive foi
preciso setar os includes dos arquivos .CSS. Já os arquivos
JavaScript não houve necessidade da importação, o
que foi feito apenas no HTML pricipal.
Os
botões fazem chamadas a funções do controller
PopupAprovacaoController
pelo
alias popAprCtrl
passado
na hora da criação da instancia do popup. Abaixo
segue o código do popupaprovacao.controller.js.
angular.module('liberacaoApp').controller('PopupAprovacaoController',
PopupAprovacaoController);
PopupAprovacaoController.$inject
= [
'$uibModalInstance',
'pendencia'];
function
PopupAprovacaoController($uibModalInstance,
pendencia)
{
var
_self =
this;
_self.pendencia
=
pendencia;
/**
* Aprovar
a
liberação.
*/
_self.aprovar
=
function()
{
//executa
outras coisas
.
. .
//fecha
o modal passando um objeto para o controller principal
$uibModalInstance.close("DEFERIDA");
};
/**
* Negar
a
liberação.
*/
_self.negar
=
function()
{
//executa
outras coisas
.
. .
//fecha
o modal passando um objeto para o controller principal
$uibModalInstance.close("INDEFERIDA");
};
/**
* Fechar
a tela
de
aprovação sem
aprovar ou negar.
*/
_self.voltar
=
function()
{
$uibModalInstance.close();
};
}
Espero
ter ajudado.
Nenhum comentário:
Postar um comentário