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)
}

当＆＃34; Foo＆＃34;点击＆＃34; Foo＆＃34;应该显示但是如何将angularjs变量值传递给javascript函数？

小提琴：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);
  };
});

然后，您需要做的就是注入它并使其在$scope对象上可用。

function LoginController($scope, callJS) {
  $scope.callJS = callJS;

  $scope.user = {
    firstName: "Foo"
  };
}

采用这种方法意味着您不仅限于单击事件，只要callJS在本地范围内，任何Angular表达式都可以调用Javascript函数。

这比将变量模板化为href属性更灵活，更易测试且更容易调试。

Answer 2

问题是值"Foo"是作为代码的一部分写出来的。在这种情况下，看起来是一个不存在的变量。

display(Foo) // ReferenceError: Foo is not defined

至少需要引用它才能被理解为字符串值。

display('Foo')

您可以使用json filter执行此操作以包含任何必要的转义序列。

<a href='javascript:display({{ user.firstName|json }});'>{{ user.firstName }}</a>

或者，如果您将该功能附加到$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>

http://jsfiddle.net/7z4wmnjj/

Answer 3

JS调试的第一步应该始终是打开你的控制台。

<p>
  <a href='javascript:display('{{ user.firstName }}');'>{{ user.firstName }}</a>
</p>

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

3 个答案: