Pass Angular.js binding to javascript function

Question

Allow me to begin by saying that I am a C++ developer by profession and have extremely poor javascript skills, so please forgive me if this is a basic question. What I am trying to do is take a string being generated from an Angular binding and pass it to a function in javascript. I have included an example below. Note that I am trying to pass {{x.VodName}} to the function called "MyFunction(vodName)". Thanks in advance!

<tr ng-repeat="x in names">
<td><a id="myLink" href="#" onclick="MyFunction({{ x.VodName }});">{{ x.VodName }}</a></td>
<td>{{ x.Stream }}</td>
<td>{{ x.ReplayTime }}</td>
<td>{{ x.Duration }}</td>
<td>X</td>

<script>
function MyFunction(vodName)
{
    window.alert(vodName);
}

don't use `onClick` , use angular `ng-click` along with your function being part of controller scope — charlietfl, Dec 05 '14 at 16:18

score 2 · Answer 1 · edited May 23 '17 at 11:57

In your template you can give an variable to a function by just giving it to the function. And instead of onclick you should use ng-click

<tr ng-repeat="x in names">
  <td><a id="myLink" href="#" ng-click="MyFunction(x.VodName);">{{ x.VodName }}</a></td>
  <td>{{ x.Stream }}</td>
  <td>{{ x.ReplayTime }}</td>
  <td>{{ x.Duration }}</td>
  <td>X</td>
</tr>

For you function in the controller it can be important to know the difference between var MyFunction = function(name){} and function MyFunction(name){}. For more about this, look here

score 0 · Accepted Answer · answered Dec 05 '14 at 16:28

try something like this, where your controller could look like:

<script>
var vapp = angular.module("vapp", []);
vapp.controller("videoController", ["$scope", function($scope){
    $scope.names = [];

    $scope.play = function(files){
      alert(files.VodName);
    };
}]);
</script>

and your html:

<table ng-controller="videoController">
    <tr ng-repeat="x in names">
      <td><a id="myLink" href="#" ng-click="play(x);">{{ x.VodName }}</a></td>
      <td>{{ x.Stream }}</td>
      <td>{{ x.ReplayTime }}</td>
      <td>{{ x.Duration }}</td>
      <td>X</td>
    </tr>
</table>

Pass Angular.js binding to javascript function

2 Answers2