AngularJS Directive-Controller-Service Interaction

Question

I'm trying to design a single page pagination app that displays the different pages of a document beneath each other in the same window. It has to meet the following requirements:

A pagination toolbar where the user can click next/previous/... and submit a page to go to.
The window scrolls to the right page of the document after a page has been submitted
If the user scrolls manually, the current page should update automatically

I tried some different stuff but was never really satisfied with the result. This is how I see the solution:

The app consists of 1 factory:

DocumentFactory: Stores the current page of the document and has the following methods:

setPage(page): sets the page in a factory so different controllers/directives can use this page
broadcast(pageChanged): broadcasts an event after the page has changed so the controllers/directives can listen to this even and react approprialty

2 controllers:

PaginationCtrl[DocumentFactory]: The pagination toolbar controller, updates the page by calling the setPage(method) of the DocumentFactory and listens to the pageChange event to update it's own scope when the page changes in an other controller/directive
DocumentCtrl: The controller of the document

1 Directive:

Page[DocumentFactory]: Resembles a page in the document and has the following methods/listeners

scrollToPage(): If the currentPage equals this pages number (added to the directive as an attribute, scroll to this page)
If this page is visible and the highest in the window of all visible pages, change the current page to this page's number by calling the DocumentFactory setPage(page) method.

Is this the right approach to store the page in a service and use events for the other controllers/directives to listen to it?

Should I create a controller in the directive to listen to the event or add a $watch in the link function to watch for changes in the current page (inherited from the parent Ctrl scope)?

Should I let each directive check if it's page number equals the current page on page change or should I let the DocumentCtrl scroll to the right element?

Craig Morgan · Accepted Answer · 2013-09-09 08:35:37Z

AS you already have the methods in the controller calling the factory, what you need is to use the '&' isolate scope in the directive to call the method you want.

Create the methods in the controller

var app = angular.module('app', []);

app.controller("Ctrl", function ($scope) {

    $scope.goForward = function (){
        alert("call to the paginator page up service");
    };
    $scope.goBack = function (){
        alert("call to the paginator page down service");
    };

});

Then set up the '&' scope isolates in the directive:

app.directive('paginator', function (){
    return{
        restrict: 'E',
        scope:{
            forward: '&',
            back: '&'
        },
        template: '<button ng-click="forward()">Page up</button>' +
                  '<button ng-click="back()">Page down</button>'
    }

});

Finally add the directive to the page with your attributes as defined in the directive:

<paginator forward="goForward()" back="goBack()"></paginator>

Here's the code in Plnkr.

HTH

Collectives™ on Stack Overflow

AngularJS Directive-Controller-Service Interaction

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related