[英]How can I call javascript function in AngularJS controller?
I have below Javascript functions 我有以下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>
now I want to call this ShowProgress()
and HideProgress()
in Angular controller. 现在我想在Angular控制器中调用这个
ShowProgress()
和HideProgress()
。 I want to call ShowProgress()
as soon as deletePrepared
invoked and HideProgress()
below GetAllPrepared
. 我想打电话给
ShowProgress()
只要deletePrepared
调用和HideProgress()
以下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>
Simply call those methods: 只需调用这些方法:
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');
});
}
});
Tip: Use Angular directives to do DOM manipulation and you don't require any jQuery code for DOM manipulation, Angular is sufficient for it. 提示:使用Angular指令进行DOM操作,并且不需要任何用于DOM操作的jQuery代码,Angular就足够了。
You can create a service and plug it inside the controller. 您可以创建服务并将其插入控制器内。 By this, you can reuse the function in multiple controllers.
这样,您就可以在多个控制器中重用该功能。
Example, 例,
/* 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: Don't forget to add service in your index.html file. PS:不要忘记在index.html文件中添加服务。
I hope this helps! 我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.