1

Preciso alterar o template dos alerts do meu sistema web. Para isso estou usando um plugin JQuery, porém, preciso passar um parametro para a minha função JQuery que este, seria o meu model que já esta sendo usado no AngularJS.

nesta função ao clicar no botão de excluir, eu não consigo acessar o model, {{setorId}}, após isto, ainda preciso navegar para um link com o click no botão de 'Confirm'.

Gostaria de fazer algo parecido com isto:

<script>
        $('.alertaExcluir').click({ setorId: '{{setorId}}' }, function () {
            $.confirm({
                icon: 'fa fa-warning',
                title: 'Confirmação',
                keyboardEnabled: true,
                content: 'Você confirma a exclusão?',
                confirmButton: 'Sim',
                cancelButton: 'Não',
                animation: 'top',
                confirm: function () {
                    alert(setorId)
                },
                cancel: function () {
                    alert('Canceled!')
                }
            });
        })
    </script>

<div class="col-sm-1" style="text-align: center; padding-right: 5px; padding-left: 0px;">
     <a class="alertaExcluir {{classeBtnEdit}}" style="color: black">
          <img style="max-height: 50px;" src="../../Images/tecbox/icons/delete-icon.png" />
          <span style="padding-top:20px;">Excluir</span>
     </a>
</div>
12
  • 2
    O AngularJS trabalha bem com jQuery. Mas se você quiser se esforçar um pouco, você pode fazer uma template modal com AngularJS. Confira aqui: docs.angularjs.org/guide/templates 4/08/2015 às 12:22
  • Obrigado pela dica, mas gostaria de ver isto funcionando, não entendo o motivo de não conseguir pegar o {{setorId}} dentro deste JQuery, é mais por 'orgulho' mesmo, pois deveria funcionar. Mas quanto ao template em Angular, conhece algum tutorial em português? 4/08/2015 às 12:24
  • 2
    A proposta do AngularJS, é separar o javascript da view. No caso, vc está fazendo uso errado. O correto era vc manter toda a estrutura javascript dentro da aplicação do angular. E chamar o método internamente, passando somente o scope do controller pela view. Eu vou colocar um exemplo como resposta aqui, ok. 4/08/2015 às 12:27
  • como vou separar a tag do angular {{foo}} da view? Acho que não esta errado, mas agora separar em um arquivo e mandar carregar ai é barbada na questão jquery, só que só farei isso depois de ver funcionando, fica mais prático de trabalhar desta forma. 4/08/2015 às 12:31
  • 1
    Eu consigo fazer o modal que vc quer, mas não é dessa maneira que você está fazendo. Eu vou colocar a resposta aqui, pra vc entender, mas vai demorar um pouco. 4/08/2015 às 12:40

2 Respostas 2

1

Passe o confirmFX para dentro do seu controller, como no exemplo abaixo:

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);
            });
        };

}]);   

Na view você deverá passar o scope do elemento que deseja deletar ng-click="excluir(data)".
Num arquivo "popup_functions.js" a parte:

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');
}

Agora coloque o script da template do modal na sua 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>

Agora crie um arquivo padrão para serviços do angular "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);
        };

    }]);

Na sua view, coloque no final do 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>
1

Você consegue capturar a variável que você precisa utilizando um código do tipo:

angular.element('[ng-controller="SetorController"]').scope().setorId

1
  • você sabe como fazer navegar para outra página usando ajax? Se sim, por favor, coloque o código dentro da mesma função JQuery que tenho la em cima. 4/08/2015 às 13:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .