CODEWITHSUNDEEP
javascriptangularjs
Phil
Phil

Reputation: 4092

AngularJS directive ng-click parameters not being passed

I'm trying to build a directive to output some HTML formatted code for a paging control (Twitter Bootstrap styled), this directive needs to take the current page and total pages from the scope of my controller and when a paging link is clicked trigger a function on my controller to change the page (builds a url and calls $location to change page).

I've watched many of the excellent YouTube angularjs videos (http://www.youtube.com/watch?v=nKJDHnXaKTY) but none seem to cover this particular complex scenario.

Any help would be great!

Here is jsfiddle that makes it clearer:

http://jsfiddle.net/philjones88/dVFDT/

What I can't get working is passing the parameter, I get:

changing page to: undefined

Upvotes: 1

Views: 4161

Answers (3)

Jared Stark
Jared Stark

Reputation: 31

I realize this question is a bit old, but there's actually another way to solve this that doesn't require recompiling or calling the parent scope. It does, however, require calling the method from within the directive in a slightly different way.

You can see the fiddle here: Fiddle

The line that's of most interest is in the template declaration. The call to onClick requires you pass it an object rather than just the value.

    template: 
    "<div ng:repeat='i in [] | range:totalPages'> " +
        "<a ng:click='onClick({page: i + 1})'>Page {{i + 1}}</a>" +
    "</div>",

This also makes use of a filter from this answer from Gloopy in order to iterate n number of times in an ng:repeat. This allows the binding to all happen in the template.

Upvotes: 0

Mathew Berg
Mathew Berg

Reputation: 28750

In your directive add the changePage call there (I know it's not where you want it). Have it call the parents scope changePage with the same parameter.

$scope.changePage = function(index){
    console.log("running changePage");
    $scope.$parent.changePage(index); //might want to check if the parent scope has this too
}

As another tip, in directives you shouldn't use the $ in front of the variables being sent in. In this case that would be $scope, $element, $attrs. The $ you see in front of scope in controllers (not linking functions) is there to let you know that it is being injected. It is not being injected in the linking controller. For instance, here:

app.directive("pager", function ($injector1, $injector2) {

This is where injected parameters would go, and you want to be able to distinguish the two of them. I realize this got a little off track and I hope the suggestion I have for the changePage is what you're looking for.

Edit: Updated fiddle http://jsfiddle.net/dVFDT/48/

Modified answer for future searchers: The function you were passing in via the click method like so:

..... click="changePage()".....

Needed to be changed to:

..... click="changePage".....

This means you're passing the function through and not the function call. This meant that in your directive when you wired up the changePage callback you were calling the function with the index like this:

changePage()(1)

and that's why you were getting undefined.

Upvotes: 2

asgoth
asgoth

Reputation: 35829

I dont understand completely, but at the end of your directive you want to execute a function of your controller?

Try:

<div class="pagination">
   <pager current-page="currentPage" total-pages="totalPages" query="query" callback="changePage()"></pager>
</div>

Upvotes: 0

Related Questions