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

我试图设计一个显示文档的在同一窗口的不同页面对方下方的单页分页应用程序。它必须满足以下要求：AngularJS指令 - 控制器 - 服务交互

一个分页工具栏，用户可以点击next/previous/...并提交一个页面去。
窗口滚动到页面提交后，该文件的右页
如果用户手动滚动时，当前页面应该自动更新

我尝试了一些不同的东西，但从来没有真正满意其结果。这是我看到的解决办法：

该应用程序包括1个工厂：

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

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

2控制器：

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

1指令：

页[DocumentFactory] ：在文档中类似于一个页面，并具有以下的方法/听众

scrollToPage（）：如果当前页等于该页数（加入到该指令作为一个属性，滚动到这个页面）
如果此页面是可见的，并在所有可见页面的窗口中最高的，通过调用DocumentFactory setPage（页面）方法改变当前页面，这个页面的数量。

这是正确的方法来存储网页的服务和使用事件的其他控制器/指令来听它吗？

我应该在指令中创建一个控制器听取事件或链接功能添加$手表手表在当前页面（从父按Ctrl范围继承）的变化？

我应该让每一个指令，检查它是否是页面数等于当前页面上的页面改变或者我应该让DocumentCtrl向右滚动元素？

来源

2013-08-19 arnoutaertgeerts

因为你已经在控制器调用工厂方法，你需要的是使用“&”隔离范围，该指令调用需要的方法。

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

});

最后的指令添加到您的属性页中定义：

控制器

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

});

然后设置“&”范围的指令隔离创建方法指令：

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

这是Plnkr中的代码。

HTH

来源

2013-09-09 08:35:37

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

回答

相关问题