javascript - 如何将 angularjs 变量值传递给 JavaScript 函数？

Question

在此代码中，我尝试将 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/

Answer 1

这样做是可行的，但仅适用于字符串。

<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 属性相比，这更灵活、更可测试且更易于调试。