在 ng-click 上调用范围外的 javascript 函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28995714/
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
call javascript function outside of scope on ng-click
提问by WJK
I have a javascript library with a bunch of useful functions that I make use of across my website that does various things.
我有一个 javascript 库，里面有一堆有用的函数，我在我的网站上使用这些函数来做各种事情。
I know that I cannot access these functions from an ng-click, because the functions are outside of scope.
我知道我无法通过 ng-click 访问这些功能，因为这些功能超出了范围。
Is there a way to access them without having to declare a scope function that just makes a call to the function in the library?
有没有办法访问它们而不必声明一个只调用库中函数的作用域函数？
Hereis a jsfiddle with an example. I would like to know if there's a way to make the second link work. This is simply because I do not like the idea of defining a function that will simply call another function. e.g.
这是一个带有示例的 jsfiddle。我想知道是否有办法使第二个链接起作用。这仅仅是因为我不喜欢定义一个只会调用另一个函数的函数的想法。例如
HTML:
HTML：
<div ng-click="doSomething()">Click Me (Working)</div>
<div ng-click="doSomethingElse()">Click Me (Not Working)</div>
Controller JS:
控制器JS：
$scope.doSomething = function () {
doSomethingElse();
};
External Library JS:
外部库JS：
function doSomethingElse() {
alert("SomethingElse");
}
<-------UPDATE------->
<-------更新------->
Thanks for the creative responses guys! Vinay K's answer is the easiest and most obvious, but I decided to go with Ron E's answer. The reason is that I already have a global module with a collection of reusable directives and that would make it easier and cleaner to implement in my HTML. Also because I sometimes use more than one function from the library and then would have to chain them in the onclick:
感谢您的创意回复！Vinay K 的答案是最简单和最明显的，但我决定采用 Ron E 的答案。原因是我已经有一个包含可重用指令集合的全局模块，这将使在我的 HTML 中实现更容易和更清晰。也因为我有时会使用库中的多个函数，然后必须在 onclick 中链接它们：
onlick="func1(); func2(); func3();"
Where a directive is just cleaner and I can call as many functions as I like while doing other stuff as well.
指令更简洁，我可以在做其他事情的同时调用任意数量的函数。
采纳答案by Ron E
You could use a directive, here is an example:
您可以使用指令，这是一个示例：
// in your JS source
angular.directive('something', [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
alert('yup');
});
}
};
}]);
// in your HTML file
<button type="button" something>Click Me!</button>
This allows you to reuse your various code chunks / functions across your entire project pretty easily.
这使您可以轻松地在整个项目中重用各种代码块/函数。
回答by Vinay K
ng-clickexpression (or any other expression in angular) will be evaluated in the context of the scope.
ng-click表达式（或任何其他角度表达式）将在范围的上下文中进行评估。
As doSomethingElseis not defined on scope it will not work.
由于doSomethingElse未在范围上定义，它将不起作用。
Use onclickinstead of ng-click
使用onclick代替ng-click
<div ng-click="doSomething()">Click Me</div>
<div onclick="doSomethingElse()">Click Me </div>
回答by Ferhat KO?ER
Hi ?f you have defined javascript function you can use old js functions and Angular js together
嗨？如果你已经定义了 javascript 函数，你可以一起使用旧的 js 函数和 Angular js
Example:
例子：
<div ng-click="doSomething()" class="myBtn"=>Click Me (Working)</div>
//JQuery Lib must be included your project
$(document).on('click','.btn',function(){
eval($(this).attr('ng-click'));
});
function doSomething(){
//Bla Blo Blu Bli
}
Thank for reading
感谢阅读
回答by Benjamin Oman
If your library is available globally (for example, on the window object) you could write a method in your rootScope that accepts the function name as a parameter. Guaranteed this isn't the most orthodox way to do things in Angular but it will eliminate the need to add all these extra methods in all of your scopes. Here's a rough example:
如果您的库是全局可用的（例如，在 window 对象上），您可以在您的 rootScope 中编写一个接受函数名称作为参数的方法。保证这不是在 Angular 中做事情的最正统的方式，但它将消除在所有范围中添加所有这些额外方法的需要。这是一个粗略的例子：
In your app.run method you could add something like this:
在您的 app.run 方法中，您可以添加如下内容：
$rootScope.callWindowMethod = function(methodName, parameter) {
if(typeof window[methodName] !== 'function') {
console.log('could not find ', methodName, ' function');
return;
}
return window[methodName](parameter);
};
Then in your view you could do something like this:
然后在您看来，您可以执行以下操作：
<button ng-click="$root.callWindowMethod('alert','Hey there!')">Click Me</button>
You could get even fancier and pass in an arbitrary number of parameters to your function as well as have the function name contain dots for methods that are nested in other objects and split those up. This should at least get you started.
您可以更高级，将任意数量的参数传递给您的函数，以及让函数名称包含嵌套在其他对象中的方法的点并将它们分开。这至少应该让你开始。
