Angular JS directive, calling another controller

Question

I'm trying to implement a simple <pagination> directive in Angular JS, and having trouble getting it to communicate with another controller to get it to react on changes to the current page.

Here's what my code looks like:

paginationDirective.js

app.controller('paginationCtrl', function ($scope) {
    this.init = function (attrs) {
        $scope.items = [
            {'page': '1', class: 'current'},
            {'page': '2', class: ''},
            {'page': '3', class: ''},
            {'page': '4', class: ''},
            {'page': '5', class: ''}
        ];
    };
});

app.directive('pagination', function () {
    return {
        controller: 'paginationCtrl',
        restrict: 'E',
        scope: {
            count: '@',
            page: '@'
        },
        templateUrl: 'views/partials/pagination.html',
        link: function (scope, element, attrs, paginationCtrl) {
            paginationCtrl.init(attrs);
        }
    }
});

pagination.html

<div class="pagination-centered">
    <ul class="pagination">
        <li class="arrow unavailable"><a href="">&laquo;</a></li>
        <li ng-repeat="item in items" class="{{ item.class }}">
            <a href="" ng-click="<!-- somepageCtrl.navigate(item.page) -->">{{ item.page }}</a>
        </li>
        <li class="arrow"><a href="">&raquo;</a></li>
    </ul>
</div>

somepage.html

<div class="content">
    <table>...data for page x...</table>

    <pagination onpage=" <!-- Run somepageCtrl.page(x) --> "></pagination>
</div>

somepageCtrl.js

app.controller('somepageCtrl', function($scope, myService){
    $scope.currentPage = 1;

    $scope.init = function () {
        myService.loadData($scope);
    };

    $scope.navigate = function(page) {
        console.log('Navigating to page ' + page);
    }

    $scope.init();
});

I'm still new to AngularJS, so I'm not entirely sure what I should do to get the pagination directive to tell somepageCtrl to navigate to the next page.

I would like to be able to pass a function that needs to be executed when the user clicks an item in the pagination directive as an attribute on the directive.

Can anyone help and nudge me in the right direction?

It's set on $routeProvider. The page executes, I'm just not sure how to get the directive to tell the controller to reload with next page's data from server. — josef.van.niekerk
– josef.van.niekerk, Commented Nov 12, 2014 at 16:42
For <pagination onpage="  "></pagination> did you mean somepageCtrl.navigate(x)? — Esteban Felix
– Esteban Felix, Commented Nov 12, 2014 at 16:51
Yes, I put it in comments to indicate it's pseudo code. Sorry for the weird convention. — josef.van.niekerk
– josef.van.niekerk, Commented Nov 12, 2014 at 16:56

josef.van.niekerk · Accepted Answer · 2014-11-14 12:43:18Z

1

I'm going to answer my own question, thanks to Esteban Felix for pointing me into the right direction.

I defined the navigate() method on somepageCtrl:

$scope.navigate = function (page) {
    console.log('Lets go to page ' + page);
};

then simply added the function to

<pagination on-change="navigate"></pagination>

The method then gets assigned in the app.directive definition like so:

scope: {
    count: '@',
    page: '@',
    onChange: '&onChange'
},

On the app.controller for paginationCtrl, I created a callback function:

$scope.callback = function (page) {
    console.log('Turn to page ' + page);
    $scope.onChange()(page);
}

and updated the markup for pagination.html to call the above callback with ng-click like so:

<a href="" ng-click="callback(item.page)">{{ item.page }}</a>

answered Nov 14, 2014 at 12:43

josef.van.niekerk

12.2k20 gold badges104 silver badges161 bronze badges

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

Comments

Esteban Felix · Accepted Answer · 2014-11-18 01:10:24Z

1

You can use the experession callback & to call your controller back from a directive.

pagination directive

app.directive('pagination', function () {
    return {
        controller: 'paginationCtrl',
        restrict: 'E',
        scope: {
            count: '@',
            page: '@',
            onPageChange: '&'
        },
        templateUrl: 'views/partials/pagination.html',
        link: function (scope, element, attrs, paginationCtrl) {
            paginationCtrl.init(attrs);

           // grab function pointer so it will be called  correctly with ng-click
           scope.onPageChange = scope.onPageChange();
        }
    }
});

somepage.html

<div class="content">
    <table>...data for page x...</table>

    <pagination on-page-change="sompageCtrl.navigate"></pagination>
</div>

pagination.html

<div class="pagination-centered">
    <ul class="pagination">
        <li class="arrow unavailable"><a href="">&laquo;</a></li>
        <li ng-repeat="item in items" class="{{ item.class }}">
            <a href="" ng-click="onPageChange(item.page)">{{ item.page }}</a>
        </li>
        <li class="arrow"><a href="">&raquo;</a></li>
    </ul>
</div>

edited Nov 18, 2014 at 1:10

answered Nov 12, 2014 at 16:54

Esteban Felix

1,57110 silver badges21 bronze badges

1 Comment

josef.van.niekerk Over a year ago

Thanks for the answer. Getting a "$scope is not defined". I tried passing $scope to app.directive, but not sure it works that way here. I also changed $scope.onPageChange = $scope.onPageChange(); to scope.onPageChange = scope.onPageChange(); but no luck. I have defined .navigate on somepageCtrl without any luck so far. Reading up to try and find a solution.

Collectives™ on Stack Overflow

Angular JS directive, calling another controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related