CODEWITHSUNDEEP
angularjsscopeangularjs-directive
arnoutaertgeerts
arnoutaertgeerts

Reputation: 2322

AngularJS Directive-Controller-Service Interaction

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:

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:

2 controllers:

  1. 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
  2. DocumentCtrl: The controller of the document

1 Directive:

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

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?

Upvotes: 0

Views: 1526

Answers (1)

Craig Morgan
Craig Morgan

Reputation: 962

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

Upvotes: 2

Related Questions