Question

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

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

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

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

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

setPage（page）：在工厂中设置页面，以便不同的控制器/指令可以使用此页面
broadcast（pageChanged）：在页面发生变化后广播一个事件，这样控制器/指令就可以监听这个事件并做出适当的反应

2个控制器：

PaginationCtrl [DocumentFactory] ：分页工具栏控制器，通过调用DocumentFactory的setPage（方法）来更新页面，并在页面更改时监听pageChange事件以更新自己的范围其他控制器/指令
DocumentCtrl ：文档的控制器

1指令：

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

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

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

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

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

Answer 1

如果您已经在控制器中调用工厂的方法，您需要的是使用'＆amp;'在指令中隔离范围以调用所需的方法。

在控制器中创建方法

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

});

然后设置'＆amp;'范围中的范围隔离：

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

AngularJS指令 - 控制器 - 服务交互

1 个答案: