web-dev-qa-db-fra.com

Comment appeler la fonction javascript dans le contrôleur AngularJS?

J'ai ci-dessous des fonctions Javascript

<script type="text/javascript">
    function ShowProgress() {
        var modal = $('<div />');
        modal.addClass("spinmodal");
        $('body').append(modal);
        var loading = $(".loading");
        loading.show();
        var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
        var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
        loading.css({ top: top, left: left });
    }

    function HideProgress() {
        var loading = $(".loading");
        loading.hide();
        $(".spinmodal").remove();
    }
</script>

maintenant je veux appeler cette ShowProgress() et HideProgress() dans le contrôleur angulaire. Je souhaite appeler ShowProgress() dès que deletePrepared est invoqué et HideProgress() ci-dessous GetAllPrepared.

<script type="text/javascript">
    app.controller("myCntrl", function ($scope, angularService, $modal) {

        $scope.deletePrepared = function (itm) {
            var getData = angularService.DeletePrepared(itm.ProductId);
            getData.then(function (msg) {
                GetAllPrepared();
            }, function () {
                alert('Error in Deleting Record');
            });
        }

    });
</script>
javascriptjqueryangularjs
12
RKS

Appelez simplement ces méthodes:

app.controller("myCntrl", function ($scope, angularService, $modal) {

    $scope.deletePrepared = function (itm) {
        ShowProgress();

        var getData = angularService.DeletePrepared(itm.ProductId);
        getData.then(function (msg) {
            HideProgress();
            GetAllPrepared();
        }, function () {
            alert('Error in Deleting Record');
        });
    }

});

Conseil: Utilisez les directives angulaires pour manipuler le DOM et vous n’avez besoin d’aucun code jQuery pour la manipulation du DOM. Angular suffit.

21
Shashank Agrawal

Vous pouvez créer un service et le brancher à l'intérieur du contrôleur. Grâce à cela, vous pouvez réutiliser la fonction dans plusieurs contrôleurs.

Exemple,

/* Controller */
angular.module('appApp')
  .controller('myCtrl', function ($scope, Modal) {
    Modal.openModal("myBtn");
}

/* Service */
angular.module('appApp')
  .factory('Modal', function() {
    return {
      openModal: function(btnId) {
            // Java script code goes here...
      }
    };
});

P.S: N'oubliez pas d'ajouter un service dans votre fichier index.html.

J'espère que ça aide!

0
imbond