Взаимодействие директивы AngularJS с контроллером и службой

Я пытаюсь разработать одностраничное приложение для разбивки на страницы, которое отображает разные страницы документа друг под другом в одном окне. Он должен отвечать следующим требованиям:

  • Панель инструментов разбивки на страницы, где пользователь может щелкнуть следующий / предыдущий / ... и отправить страницу для перехода.
  • Окно прокручивается на правую страницу документа после того, как страница была отправлена.
  • Если пользователь прокручивает вручную, текущая страница должна обновиться автоматически.

Я пробовал разные вещи, но никогда не был доволен результатом. Вот как я вижу решение:

Приложение состоит из 1 фабрики:

DocumentFactory: хранит текущую страницу документа и имеет следующие методы:

  • setPage (page): устанавливает страницу на фабрике, чтобы разные контроллеры / директивы могли использовать эту страницу
  • трансляция (pageChanged): транслирует событие после изменения страницы, поэтому контроллеры / директивы могут слушать это даже и реагировать на соответствие

2 контроллера:

  1. PaginationCtrl [DocumentFactory]: контроллер панели инструментов разбиения на страницы обновляет страницу, вызывая setPage (метод) DocumentFactory, и прослушивает событие pageChange для обновления своей собственной области при изменении страницы в другом контроллере / директива
  2. DocumentCtrl: контролер документа.

1 Директива:

Страница [DocumentFactory]: похожа на страницу в документе и имеет следующие методы / прослушиватели.

  • scrollToPage (): если currentPage совпадает с номером этой страницы (добавлено в директиву как атрибут, прокрутите до этой страницы)
  • Если эта страница видна и находится наверху в окне всех видимых страниц, измените текущую страницу на номер этой страницы, вызвав метод DocumentFactory setPage (page).

Это правильный подход для хранения страницы в службе и использования событий для других контроллеров / директив для ее прослушивания?

Должен ли я создать в директиве контроллер для прослушивания события или добавить $ watch в функцию ссылки для отслеживания изменений на текущей странице (унаследованной от родительской области Ctrl)?

Должен ли я позволить каждой директиве проверять, совпадает ли номер страницы с текущей страницей при изменении страницы, или я должен позволить DocumentCtrl прокрутить до нужного элемента?


angularjs scope angularjs-directive
person arnoutaertgeerts    schedule 19.08.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку у вас уже есть методы в контроллере, вызывающие фабрику, вам нужно использовать область выделения '&' в директиве для вызова нужного метода.

Создайте методы в контроллере

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");
    };

});

Затем настройте изоляторы области '&' в директиве:

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>'
    }

});

Наконец, добавьте директиву на страницу с вашими атрибутами, как определено в директиве:

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

Вот код в Plnkr.

HTH

person Craig Morgan    schedule 09.09.2013