Define function inside Angular directive's isolated scope

Question

I'm writing a custom <pagination> directive, which will return elements responsible for changing the current page and pagination settings (e.g. how many items will be displayed per page). The directive has isolated scope (to make it more reusable).

Inside the directive template I need to call functions like changePage() or changePaginationSettings(). The only way to pass a function inside the isolated scope I've found so far is define the function in the controller.

mainController.js

module.controller("mainController", function($scope) {
    $scope.changePage = function() { ... };
});

and then pass it to directive as an attribute:

pagination.js

module.directive("pagination", function() {
    return {
        restrict: "E",
        scope: {
           changePage: "="
        },
        templateUrl: "templates/pagination.html"
    }
}

pagination.html

<pagination change-page="changePage">

This looks very ugly to me, because it's splitting related code into 2 unrelated files. That is changePage() function should be defined in the pagination.js file, not in mainController.js.

I'd think something like that should be possible:

pagination.js

module.directive("pagination", function() {
    function changePage() { ... };

    return {
        restrict: "E",
        scope: {
           changePage: changePage
        },
        templateUrl: "templates/pagination.html"
    }
}

But such code is producing a (meaningless to me) error: Error: definition.match is not a function.

Is there a way to achieve that? I mean to pass a function defined in the same file inside an isolated scope of directive.

I've read AngularJS Directive Docs but they don't even list what are legal values in scope object of a directive, only give some "=", "&" and "@" examples.

Answer 1

The only legal values for an isolated scope object definition are strings which begin with &, @, or =. (You can also follow these symbols with the name of the property on the parent scope should you want the property name to differ within the directive.¹) In this instance you want to use the = symbol as this indicates that Angular should "bind changePage on the directive scope to changePage on the parent scope". Take a look at this answer for more details.

You're right that it is ugly having to pass this function in via an attribute on the directive, however this is the nature of having an isolated scope. You might consider having the changePage and other related methods in a service, as you can then inject this as a dependency.

Edit

Without an isolate scope you could do the following:

module.directive("pagination", function() {    
    return {
        restrict: "E",
        templateUrl: "templates/pagination.html",
        link: function(scope, elem, attrs) {
            // scope.changePage is available from the directive's parent $scope
        }
    }
}

---

¹ Example: { 'nameInDirective': '=nameOnParent' }