web-dev-qa-db-de.com

Wie kann ich die Javascript-Funktion im AngularJS-Controller aufrufen?

Ich habe unten Javascript-Funktionen

<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>

ich möchte jetzt ShowProgress() und HideProgress() in Angular Controller nennen. Ich möchte ShowProgress() aufrufen, sobald deletePrepared aufgerufen wird und HideProgress() unter 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>
javascriptjqueryangularjs
12
RKS

Rufen Sie einfach diese Methoden auf:

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

});

Tipp: Verwenden Sie Angular-Direktiven, um die DOM-Manipulation durchzuführen, und Sie benötigen keinen jQuery-Code für die DOM-Manipulation.

21
Shashank Agrawal

Sie können einen Dienst erstellen und in den Controller einstecken. Dadurch können Sie die Funktion in mehreren Controllern wiederverwenden.

Beispiel,

/* 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...
      }
    };
});

P.S: Vergessen Sie nicht, in Ihrer index.html-Datei einen Dienst hinzuzufügen.

Ich hoffe das hilft!

0
imbond