Pass the confirmFX into your controller, as in the example below:
angularApp.controller('SetorController', ['$scope', '$routeParams', '$location', '$filter', '$http', 'confirmFx',
function ($scope, $routeParams, $location, $filter, $http, confirmFx) {
$scope.deletarRegistro = function(data) {
/* aqui você coloca a requisição do banco que
faz a exclusão e dá um echo com
json_encode(['success'=>true,'message'=>'Mensagem excluída com sucesso!']);
*/
$.post('/deletar-registro', {id:data.setorId}, function(rtn) {
if (rtn.success) {
alert(rtn.message);
}
});
}
$scope.excluir = function (data) {
confirmFx('Exclusão de arquivo', 'Você confirma a exclusão?',
function () {
$scope.deletarRegistro(data);
});
};
}]);
In the view you should pass the scope of the element you want to delete ng-click="excluir(data)"
.
In a file "popup_functions.js" the part:
function zIndexPopup() {
var zInd = parseInt($('.ui-front ').css('z-index')) + 1000;
$('.ui-front ').css('z-index', zInd)
//console.log(zInd);
}
function confirmFx(titulo, content, arrayBotoes) {
$(window).scrollTop(0);
$('body').scrollTop(0);
$("<div id='alertFx2' title='" + titulo + "' style='text-align:left'>" +
"<table style='border:none'>" +
"<tr>" +
"<td>" + content + "</td>" +
"<tr>" +
"</table>" +
"</div>").dialog({
modal: true,
buttons: arrayBotoes,
autoOpen: false,
position: {my: "top+120", at: "center top", of: window},
drag: function(event, ui) {
$(window).scrollTop(0);
$('body').scrollTop(0);
},
open: function() {
var id = $(this).attr("id");
if (id != "alertFx2") {
$(this).dialog("destroy");
}
zIndexPopup();
}
}).dialog('open');
}
Now place the modal template script in your view:
<script type="text/ng-template" id="confirmFxModal.html">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
<div class="modal-body" style="font-weight: normal;">
<div ng-bind-html="message">{{message}}</div>
<div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">Sim</button>
<button class="btn btn-default" ng-click="cancel()">Não</button>
</div>
</script>
Now create a default file for angled services "servicesDefault.js":
angularApp.factory('confirmFx', ['$modal', function ($modal) {
function confirmFxCtrl($scope, title, content, $modalInstance, fnCallBack) {
$scope.title = title;
$scope.message = content;
$scope.ok = function () {
setTimeout(fnCallBack, 10);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
function openPopup(title, content, fnCallBack) {
var modalInstance = $modal.open({
templateUrl: 'confirmFxModal.html',
controller: confirmFxCtrl,
size: 'sm',
resolve: {
title: function () {
return title;
},
content: function () {
return content;
},
fnCallBack: function () {
return fnCallBack;
}
}
});
return modalInstance;
}
return function (title, content, fnCallBack) {
return openPopup(title, content, fnCallBack);
};
}]);
In your view, place at the end of the body:
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="js/SetorController.js"></script>
<script type="text/javascript" src="js/popup_functions.js"></script>
<script type="text/javascript" src="js/servicesDefault.js"></script>