如何将 angularjs 变量值传递给 javascript 函数？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29638264/
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 pass an angularjs variable value to a javascript function?
提问by blue-sky
In this code I'm attempting to pass a AngularJS paramter to a function :
在这段代码中，我试图将一个 AngularJS 参数传递给一个函数：
<div ng-app ng-controller="LoginController">
<p><a href='javascript:display({{ user.firstName }});'>{{ user.firstName }}</a>
</div>
function LoginController($scope) {
$scope.user = {
firstName: "Foo"
};
}
function display(text){
alert(text)
}
When "Foo" is clicked "Foo" should be displayed but how to pass an angularjs variable value to a javascript function ?
单击“Foo”时，应显示“Foo”，但如何将 angularjs 变量值传递给 javascript 函数？
Fiddle : http://jsfiddle.net/Lt7aP/534/
回答by Dan Prince
Doing this would work, but only for strings.
这样做会起作用，但仅适用于字符串。
<p><a href='javascript:display("{{ user.firstName }}");'>{{ user.firstName }}</a>
This might be a bit of a deep dive into Angular, but you should think about implementing a factory which can explicitly handle this behaviour for you.
这可能对 Angular 有点深入，但您应该考虑实现一个可以为您显式处理此行为的工厂。
We can make a function that takes a name and any number of arguments and passes the arguments on to the Javascript function with that name. It can work like this:
我们可以创建一个函数，它接受一个名称和任意数量的参数，并将这些参数传递给具有该名称的 Javascript 函数。它可以像这样工作：
<a ng-click='callJS("display", user.firstName)'></a>
And it can be implemented in a fairly straightforward way.
它可以以相当简单的方式实现。
// register a new factory on our module
app.factory('callJS', function() {
// a factory returns one value
return function(fnName) {
var args = [].slice.call(arguments, 1),
fn = window.fnName;
return fn.apply(fn, args);
};
});
Then all you need to do to use the service is inject it and make it available on the $scopeobject.
然后，使用该服务所需要做的就是注入它并使其在$scope对象上可用。
function LoginController($scope, callJS) {
$scope.callJS = callJS;
$scope.user = {
firstName: "Foo"
};
}
Taking this approach means you won't be limited to just click events either, as long as callJSis in the local scope, any Angular expression will be able to call Javascript functions.
采用这种方法意味着您也不会仅限于单击事件，只要callJS在本地范围内，任何 Angular 表达式都可以调用 Javascript 函数。
This is more flexible, more testable and easier to debug, than templating variables into hrefattributes.
与将变量模板化为href属性相比，这更灵活、更易于测试且更易于调试。
回答by Jonathan Lonowski
The issue is that the value, "Foo", is being written out as part of code. In this case, appearing to be a variable that doesn't exist.
问题是值 ，"Foo"作为代码的一部分被写出。在这种情况下，似乎是一个不存在的变量。
display(Foo) // ReferenceError: Foo is not defined
It'll need to at least be quoted to be understood as a string value.
它至少需要被引用才能被理解为字符串值。
display('Foo')
You can use the jsonfilterto do this to include any necessary escape sequences.
您可以使用json过滤器执行此操作以包含任何必要的转义序列。
<a href='javascript:display({{ user.firstName|json }});'>{{ user.firstName }}</a>
Or, if you attach the function to the $scope, you can reference it and the value without {{...}}or filters in an ng-click:
或者，如果将函数附加到$scope，则可以在 中引用它和不带{{...}}或 过滤器的值ng-click：
function LoginController($scope) {
$scope.user = {
firstName: "Foo"
};
$scope.display = function (text) {
alert(text);
};
// or keep the global function and reference it on the $scope
// $scope.display = display;
}
<a ng-click="display(user.firstName)">{{user.firstName}}</a>
回答by Adam
First step in JS debugging should always be to open your console.
JS 调试的第一步应该总是打开你的控制台。
<p>
<a href='javascript:display('{{ user.firstName }}');'>{{ user.firstName }}</a>
</p>
