如何从 AngularJS 控制器调用自定义 Javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22080262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to call custom Javascript functions from an AngularJS controller?
提问by ElHaix
I have a standard function in app.jsdefined as follows:
我有一个标准函数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
});
}
});
In an AngularJS controller method, I want to be able to call showError():
在 AngularJS 控制器方法中，我希望能够调用 showError()：
someFunction()
.success(function (result) {
// great!
})
.error(function (error) {
// call standard error message function
showError("Update Failed"); // use default error message
});
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.
我知道 app.js 已加载，但我不确定如何在 AngularJS 的上下文中调用我自己的一些自定义函数。
There is a vestigial function in the angular.moduledefinition, as I tried putting my custom function in there to see if this would work - no.
angular.module定义中有一个残留函数，因为我尝试将我的自定义函数放在那里，看看这是否可行 - 不。
What is the appropriate way of accomplishing this?
实现此目的的适当方法是什么？
-- UPDATE --
- 更新 -
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.
为了澄清，我将要调用许多自定义功能，如showError()与showSuccess()许多控制器，所以这些功能应该具有全局范围，而不是局限在一个特定的角度控制器。
回答by Alexandrin Rus
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.
好吧，你可以从任何地方调用它，因为它是 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
});
}
};
});
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
});
});
You can then add more functions to the service like showSuccessand 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.
然后，您可以向服务添加更多功能，例如showSuccess，如果您决定将来某个时间用另一个插件替换插件或对服务进行任何更改，则它的优点是只需在一个地方进行更改。
Warning
警告
Creating directives for any jQuery plugin integration is the way to go in 99% of cases. I believe a simple alertServicecan "bend" the rules in this case as to avoid overcomplication by broadcasting and catching events inside a directive.
在 99% 的情况下，为任何 jQuery 插件集成创建指令都是可行的方法。我相信一个简单的方法alertService可以在这种情况下“弯曲”规则，以避免通过在指令中广播和捕获事件来避免过度复杂化。
