In this code I'm attempting to pass a AngularJS paramter to a function :

<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 ?

Fiddle : /

In this code I'm attempting to pass a AngularJS paramter to a function :

<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 ?

Fiddle : http://jsfiddle/Lt7aP/534/

• javascript
• jquery
• angularjs

3 Answers 3

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.

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:

<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 $scope object.

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 callJS is in the local scope, any Angular expression will be able to call Javascript functions.

This is more flexible, more testable and easier to debug, than templating variables into href attributes.

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.

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 json filter to do this to include any necessary escape sequences.

<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:

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/7z4wmnjj/

First step in JS debugging should always be to open your console.

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