如何在AngularJS控制器中调用javascript函数？

我有以下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(); }  

现在我想在Angular控制器中调用这个ShowProgress()和HideProgress() 。 我想在调用deletePrepared调用ShowProgress() ，并在HideProgress()下调用HideProgress() 。

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

Answer 1

只需调用这些方法：

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

提示：使用Angular指令进行DOM操作，并且不需要任何用于DOM操作的jQuery代码，Angular就足够了。

Answer 2

您可以创建服务并将其插入控制器内。 这样，您就可以在多个控制器中重用该function。

例，

 /* 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：不要忘记在index.html文件中添加服务。

我希望这有帮助！