Question

我在app.js中有一个标准函数，定义如下：

var app = angular.module('app', ['ngResource', 'ngRoute', 'ngSanitize'], function () {

});


$(document).ready(function () {
    // standard error box
    function showError(title, content) {
        $.bigBox({
            title: title,
            content: content == null ? "An error occurred.<br /><br />If this error persists, please contact support." : content,
            color: "#C46A69",
            //timeout: 6000,
            icon: "fa fa-warning shake animated",
            //number: "1",
            timeout: 3000
        });
    }
});

在AngularJS控制器方法中，我希望能够调用showError（）：

                    someFunction()
                        .success(function (result) {
                            // great!
                        })
                        .error(function (error) {
                            // call standard error message function
                            showError("Update Failed"); // use default error message
                        });

我知道app.js已加载，但我不确定如何在AngularJS的上下文中调用我自己的一些自定义函数。

angular.module定义中有一个残余函数，因为我尝试将自定义函数放在那里以查看是否可行 - 不。

完成此任务的适当方法是什么？

- 更新 -

为了澄清，我想从许多控制器中调用许多自定义函数，如showError()和showSuccess()，因此这些函数应该具有全局范围，而不仅限于一个特定的Angular控制器。

Answer 1

好吧，你可以从任何地方调用它，因为它是javascript，但是你永远不应该使用全局函数，所以我会用我需要的函数创建一个警报服务，然后通过将它注入控制器内来使用它。

angular.module('yourModule').factory('alertService', function() {
    return {
        showError : function() {
            $.bigBox({
                title: title,
                content: content == null ? "An error occurred.<br /><br />If this error    persists, please contact support." : content,
                color: "#C46A69",
                //timeout: 6000,
                icon: "fa fa-warning shake animated",
                //number: "1",
                timeout: 3000
            });
        }
    };
});

然后你可以将它注入任何控制器并使用它：

angular.module('yourModule').controller('yourController', function($scope, alertService) {
   someFunction().success(function (result) {
       // great!
   }).error(function (error) {
       // call standard error message function
       alertService.showError("Update Failed"); // use default error message
   });
});

然后，您可以向服务添加更多功能，例如showSuccess，如果您决定将来用另一个插件替换插件或对其进行任何更改，则它的优点是只需要在一个地方进行更改服务。

警告

为99％的案例创建任何jQuery插件集成的指令。我相信一个简单的alertService可以“弯曲”这种情况下的规则，以避免通过在指令中广播和捕获事件来过度复杂。

如何从AngularJS控制器调用自定义Javascript函数？

1 个答案: