current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 8 down vote favorite
2

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>
share|improve this question
1  
just call those mthods and see what is happening – Arun P Johny Jul 3 '15 at 3:10
1  
The dom manipulation is better done in directive instead of controller. – geckob Jul 3 '15 at 3:20
up vote 16 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.