Use Angularjs to pass parameter to Jquery

Question

I need to change my web system’s Alerts template. For this I am using a Jquery plugin, however, I need to pass a parameter to my Jquery function that this, would be my model that is already used in Angularjs.

in this function by clicking the delete button, I cannot access the model, {{sector}}, after this, I still need to navigate to a link by clicking the 'Confirm' button'.

I’d like to do something like this:

<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>

Answer 1

Pass 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 must pass the Scope of the element you want to delete ng-click="excluir(data)".
In a "popup_functions.js" file 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 put 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 standard file for angular 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);
        };

    }]);

On 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>

Answer 2

You can capture the variable you need using a type code:

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