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
– charlietfl, Commented Dec 5, 2014 at 16:18

Community · Accepted Answer · 2017-05-23 11:57:43Z

2

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

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Dec 5, 2014 at 16:22

Daniel Budick

1,8501 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raphael Müller · Accepted Answer · 2014-12-05 16:28:48Z

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>

Collectives™ on Stack Overflow

Pass Angular.js binding to javascript function

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related