Olá pessoal, estou tendo algumas dificuldades para criar uma Modal como uma Diretiva, onde a ideia seria criar uma modal para confirmar uma determinada ação, possuindo dois botões, um de Sim e outro de Não e, para cada um destes dois botões atribuir uma função.
No treinamento, foi mostrado o uso do caractere "&" (utilizado quando queremos executar dentro de uma diretiva uma função que pertence a um escopo pai, o de um controller), porém não está funcionado.
A modal até está aparecendo, quando chamo ela através de um botão que adicionei na view, porém, as ações não são executadas.
Abaixo segue os códigos:
<!-- View Principal -->
<div class="row">
<div class="col-md-12">
<button class="btn btn-block bg-primary" type="button" ng-click="showModal()">Chama Modal</button>
</div>
</div>
<!-- Invocação da modal na View Principal quando variável show = true -->
<div class="row">
<minha-modal show="show" title="Minha Modal" confirmAction="clicouBotaoSim()" cancelAction="clicouBotaoNao()">
Deseja realmente excluir?
</minha-modal>
</div>
<!-- Controller View -->
$scope.showModal = function()
{
$scope.show = true;
};
$scope.clicouBotaoSim = function()
{
console.log("SIM");
};
$scope.clicouBotaoNao = function()
{
console.log("NAO");
};
<!-- Diretiva -->
.directive('minhaModal', function() {
var ddo = {};
ddo.restrict = "E";
ddo.transclude = true;
ddo.scope = {
show: "=",
title : "@",
confirmAction: "&",
cancelAction: "&"
};
ddo.templateUrl = "js/directives/minha-modal.html";
return ddo;
});
<!-- Template Diretiva -->
<div class='ng-modal' ng-show='show'>
<div class='ng-modal-overlay' ng-click='cancelAction()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancelAction()">×</button>
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body">
<p ng-transclude></p>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-md-6 col-xs-6">
<button type="button" ng-click="confirmAction()" class="btn btn-success col-md-4 col-xs-6">
Sim
</button>
</div>
<div class="col-md-6 col-xs-6">
<button type="button" ng-click="cancelAction()" class="btn btn-danger col-md-4 col-xs-6 col-md-offset-8 col-xs-offset-6">
Não
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CSS utilizado para a Modal -->
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.8;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index: 10000;
position: absolute;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
}
.ng-modal-dialog-content {
padding: 10px;
text-align: left;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}Desde já agradeço!
