I have below Javascript functions
<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. I want to call ShowProgress()
as soon as deletePrepared
invoked and HideProgress()
below 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>
You can call your angularJS function from javascript or jquery with the help of angular. element().
In AngularJS when it comes to communicating between controllers, one would naturally assume to reference another controller you can simply inject it into another controller and call its methods: however, you cannot do that.
You need to execute a separate java-script function. For an angular application it is not a proper way to run javascript out of scope of angular. It will ensure that the external function exist before starting app. It will add more flexibility and control over the java script function in angular.
The call() method is a predefined JavaScript method. It can be used to invoke (call) a method with an owner object as an argument (parameter). With call() , an object can use a method belonging to another object.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With