0

我正在尝试设计一个单页分页应用程序，该应用程序在同一窗口中显示文档的不同页面。它必须满足以下要求：

  • 一个分页工具栏，用户可以在其中单击下一个/上一个/...并提交要转到的页面。
  • 提交页面后，窗口滚动到文档的右侧页面
  • 如果用户手动滚动，当前页面应该会自动更新

我尝试了一些不同的东西，但从未对结果真正满意。这就是我看到解决方案的方式：

该应用程序由 1 个工厂组成：

DocumentFactory：存储文档的当前页面，有以下方法：

  • setPage(page)：在工厂中设置页面，以便不同的控制器/指令可以使用该页面
  • 广播（pageChanged）：在页面更改后广播一个事件，以便控制器/指令可以监听这个事件并做出适当的反应

2个控制器：

  1. PaginationCtrl[DocumentFactory] ​​：分页工具栏控制器，通过调用 DocumentFactory 的 setPage(method) 更新页面，并在页面在其他控制器/指令中更改时侦听 pageChange 事件以更新其自己的范围
  2. DocumentCtrl : 文档的控制器

1 指令：

Page[DocumentFactory] ​​：类似于文档中的页面，并具有以下方法/侦听器

  • scrollToPage()：如果 currentPage 等于此页数（作为属性添加到指令中，滚动到此页）
  • 如果这个页面是可见的，并且在所有可见页面的窗口中最高，则通过调用 DocumentFactory 的 setPage(page) 方法将当前页面更改为该页面的编号。

这是将页面存储在服务中并使用其他控制器/指令的事件来监听它的正确方法吗？

我应该在指令中创建一个控制器来监听事件还是在链接函数中添加一个 $watch 来监视当前页面的变化（从父 Ctrl 范围继承）？

我应该让每个指令检查它的页码是否等于页面更改时的当前页面，还是应该让 DocumentCtrl 滚动到正确的元素？

4

1 回答 1

2

由于您已经在控制器中拥有调用工厂的方法，因此您需要使用指令中的“&”隔离范围来调用您想要的方法。

在控制器中创建方法

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 中的代码。

高温高压

于 2013-09-09T08:35:37.320 回答