在此代码中,我尝试将 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)
}
当点击“Foo”时,应该显示“Foo”,但是如何将 angularjs 变量值传递给 JavaScript 函数?
fiddle :http://jsfiddle.net/Lt7aP/534/
最佳答案
这样做是可行的,但仅适用于字符串。
<p><a href='javascript:display("{{ user.firstName }}");'>{{ user.firstName }}</a>
这可能需要深入了解 Angular,但您应该考虑实现一个可以为您显式处理此行为的工厂。
我们可以创建一个函数,它接受一个名称和任意数量的参数,并将参数传递给具有该名称的 Javascript 函数。它可以这样工作:
<a ng-click='callJS("display", user.firstName)'></a>
并且它可以以相当简单的方式实现。
// 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);
};
});
然后,要使用该服务,您所需要做的就是注入(inject)它并使其在 $scope
对象上可用。
function LoginController($scope, callJS) {
$scope.callJS = callJS;
$scope.user = {
firstName: "Foo"
};
}
采用这种方法意味着您也不会仅限于单击事件,只要 callJS
在本地范围内,任何 Angular 表达式都能够调用 Javascript 函数。
与将模板变量放入 href
属性相比,这更灵活、更可测试且更易于调试。
关于javascript - 如何将 angularjs 变量值传递给 JavaScript 函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29638264/