如何从AngularJS控制器调用自定义Javascript函数？ [英] How to call custom Javascript functions from an AngularJS controller?

问题描述

我在 app.js 标准函数定义如下：

I have a standard function in app.js defined as follows:

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（）：

In an AngularJS controller method, I want to be able to call showError():

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

我知道app.js被加载，但我不知道如何调用一些我自己的自定义功能AngularJS的范围内。

I know app.js is loaded, but I am not sure on how to call some of my own custom functions within the context of AngularJS.

有在 angular.module 定义一个退化的功能，我试图把我的自定义功能，在那里，看看是否这会工作 - 没有

There is a vestigial function in the angular.module definition, as I tried putting my custom function in there to see if this would work - no.

什么是解决这个问题的适当方法？

What is the appropriate way of accomplishing this?

- 更新 -

要澄清一下，我会想许多调用像 showError（）和 showSuccess（）许多自定义功能控制器，所以这些功能应该具有全局范围，而不是局限在一个特定的角度控制器。

To clarify, I will want to invoke many custom functions like showError() and showSuccess() from many controllers, so these functions should have global scope, and not confined to one specific Angular controller.

推荐答案

好了，你可以只从任何地方调用它，因为它的JavaScript，但你不应该使用全局函数，所以我将与我所需要的功能创建一个报警服务，然后注入其控制器内部使用它。

Well, you could just call it from anywhere since it's javascript, however you should never use global functions so I would create an alert service with the functions I need, and then use it by injecting it inside the controllers.

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

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

Then you can inject it inside any controller and use it:

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 ，它有，如果你决定一段时间在未来取代需要在短短一个地方的变化的优势与其他插件或对服务的任何更改。

You can then add more functions to the service like showSuccess and it has the advantage of requiring changes in just a single place if you decide some time in the future to replace the plugin with another or make any changes to the service.

警告

创建指令任何jQuery插件整合的情况下，99％的路要走。我相信一个简单的 alertService 可以弯曲在这种情况下，规则通过广播和捕获事件指令内避免overcomplication。

Creating directives for any jQuery plugin integration is the way to go in 99% of cases. I believe a simple alertService can "bend" the rules in this case as to avoid overcomplication by broadcasting and catching events inside a directive.

这篇关于如何从AngularJS控制器调用自定义Javascript函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！