Question

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

Answer 1

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.