jQuery Girl
  1. jQuery Girl
  3. Comment appeler la fonction javascript dans le contrôleur AngularJS?
Intereting Posts
Manipulation des “données” à partir de $ .ajax success: function (data) { Ouvrez un onglet à la fois en accordéon Calendrier complet avec Twitter Bootstrap? Alternative pour vérifier le navigateur inactif Prendre des photos depuis une webcam ou une caméra mobile dans des applications Web comment obtenir un élément de tableau à partir d’un modèle dans backbone.js jQuery bascule l’animation Comment écrire une fonction où la sortie pour “sum (2,3)” et “sum (2) (3)” sera 5 Erreur AJAX: les données nécessaires pour effectuer cette opération ne sont pas disponibles. pouvez-vous soumettre un formulaire avec un tableau de saisie de texte? Autoriser uniquement les valeurs alphanumériques Comment utiliser jQuery pour sélectionner un frère de l’élément parent? Fancybox: variable de tableau non transmise Appeler Django View depuis Ajax JQuery UI Sélecteur de dates minDate et plage de dates apparemment brisées

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

J’ai ci-dessous des fonctions Javascript 

 function ShowProgress() { var modal = $('
'); 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(); }

Maintenant, je veux appeler ShowProgress() et HideProgress() dans le contrôleur angular. Je souhaite appeler ShowProgress() dès que deletePrepared est deletePrepared et HideProgress() sous GetAllPrepared . 

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

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 angulars pour manipuler le DOM et vous n’avez besoin d’aucun code jQuery pour la manipulation du DOM. Angular suffit.

Vous pouvez créer un service et le twigr à 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... } }; });

PS: N’oubliez pas d’append un service dans votre fichier index.html.

J’espère que ça aide!