Question

我有以下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>

现在我想在Angular控制器中调用此ShowProgress()和HideProgress()。我想在调用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>。

{{1}}

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

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

实施例，

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

我希望这有帮助！

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

2 个答案: