angular: calling a function with parameter using ng-click inside directive template

Question

new to angular here :)
I have a custom directive that have an ng-click in it which calls a function I have defined in a controller (not the directive controller).
This is the html view:

<course-pass course-id="bla"/>

This is the directive:

 scotchApp.directive("coursePass", function($compile) {
    return {
    restrict: "E",
    controller: 'dropdownCtrl',
    replace:'true',
    templateUrl: 'template/coursepass.html',
    scope: {
            courseId: '@courseId',
        }
    }
});

This is coursepass.html (the template):
Important line is the li tag

<div class="btn-group courseContainer" dropdown>
    <button type="button" class="btn dropdown-toggle course passedCourse" dropdown-toggle ng-disabled="disabled" id="{{courseId}}">
        some name<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a ng-click="markFail({{courseId}})">mark fail</a></li>
    </ul>
</div>

And this is the function inside the dropdownCtrl controller:

$scope.markFail = function(courseId) {
    alert("we do nice things");
    // do some stuff
}

The function renders well, and so does {{courseId}}
But I get this error:

Error: [$parse:syntax] http://errors.angularjs.org/1.2.25/$parse/syntax?p0=courseId&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=12&p3=markFail(%7B%7BcourseId%7D%7D)&p4=courseId%7D%7D)
    at Error (native)

On angular site it says:

Syntax Error: Token 'courseId' is at column {2} of the expression [{3}] starting at [{4}].

And the ng-click wont trigger the function.
When I change the temeplte to read something like:

<li><a ng-click="markFail(someString)">mark fail</a></li>

I can see that the on-click works and calls markFail function, but the parameter passed is undefined.

What am I doing wrong?
Thank you!

if it's an ID - shouldn't it be someInteger, not someString? Don't know if that's your issue - but checking. — itamar
– itamar, Commented Feb 20, 2015 at 21:46
Try doing it with markFail("someString"). Note the added quotes. This should work. If it does, markFail(courseId) should work too. If that doesn't, then courseId isnt being set properly somewhere. — David says Reinstate Monica
– David says Reinstate Monica, Commented Feb 20, 2015 at 21:47
'<a ng-click='markFail("someString")'>' worked fine (the string was sent in the function. but <a ng-click='markFail("{{courseId}}")'> didnt work, it sends the string {{courseId}} inside and only render it in the DOM @itamar yea, right now sending string only for testing :) — Aviv
– Aviv, Commented Feb 20, 2015 at 21:57

David says Reinstate Monica · Accepted Answer · 2015-02-20 21:49:05Z

2

You need to remove the {{}} from your parameter -

<li><a ng-click="markFail(courseId)">mark fail</a></li>

So why wasn't this working for markFail(someString)? Because you didn't put quotes around someString, thus Angular was trying to resolve someString as a variable and concluded that it was undefined. If you instead did markFail("someString"), you should be fine.

answered Feb 20, 2015 at 21:49

David says Reinstate Monica

20.2k22 gold badges84 silver badges124 bronze badges

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

1 Comment

Aviv Over a year ago

First of all, I didn't know that you don't need {{}} inside ng-click. That's good to know :) After using markFail(courseId) it just sent the string "courseId" and then I realized that that I didn't initiate courseId inside the controller scope. only in the directive. Because my idea at first was to get the id from the html tag <course-pass course-id="bla"/> and pass it to the template. The thing is, the rendering worked fine outside the ng-click, for example, in the template, at <button> {{courseId}} rendered into "bla" just fine. I guess that the rendering inside ng-click is dif

Collectives™ on Stack Overflow

angular: calling a function with parameter using ng-click inside directive template

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related