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指令 - 控制器 - 服務交互

回答

相關問題