passing $scope variable into html function markup with angular

Question

I have a ng-repeat and I want to call a function in a ng-mouseover using two parameter as follow:

ng-mouseover="textlimit({{item.id}}, 900)"

If I do that the variable appears correctly in the sources, but the console outputs an angular syntax error. My function isn't working since then I added this variable.

How should I proceed?

PS: the variable is a number: 1, 2, 3, 4 etc.

Thanks

You just have to pass it as ng-mouseover="textlimit(item.id, 900)" Remove interpolation. — PSL
– PSL, Commented Aug 28, 2014 at 14:04

Nidhish Krishnan · Accepted Answer · 2014-08-28 14:17:02Z

4

No need of {{}} in ng-mouseover since its an angular component,

you can use the method directly like

ng-mouseover="textlimit(item.id, 900)"

instead of

ng-mouseover="textlimit({{item.id}}, 900)"

A sample example is shown below

Working Demo

html

<div ng-app='myApp' ng-controller="ArrayController">
   <a href="#" onclick="return false;" ng-mouseover="textlimit(item.id, 900)">Download</a>
</div>

script

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.item = {
        id:21
    }
    $scope.textlimit = function(id, value)
    {
        console.log('id::',id);
        console.log('value::',value);
    }
});

edited Aug 28, 2014 at 14:17

answered Aug 28, 2014 at 14:08

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

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

1 Comment

SKYnine Over a year ago

... Thanks! couldn't find anything about it.

Collectives™ on Stack Overflow

passing $scope variable into html function markup with angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related