2

ページネーション ディレクティブを記述しようとしていますが、そのためには、トランスクルージョンされている要素の数を知る必要があるため、HTML は次のようになります。

<pagelister>
    <div ng-repeat="name in searchResults">{{name}}</div>
</pagelister>

(これは単純なケースです。トランスクルージョンされるコードは、任意に複雑になる可能性があります。)

ディレクティブは何かを監視する必要があるため、ページ数を再計算できます。

EDIT申し訳ありませんが、コードはコードとして呼び出されませんでした。上記のコードで、リスト内の名前をたとえば 10 ページのページに分割し、次へ/前へのボタンをいくつか追加します。

問題はlink、ディレクティブの関数が呼び出されたときに、div がまだ展開されていないことです。私はDOMへの変更を延期するだけでそれを「修正」しましたが、それは初めてしか機能しません。$scope.searchResults (またはトランスクルードされたコードによって観察されるその他のもの) が変更された場合、DOM を再調整する必要があります。それがいつなのかを知りたいだけです。

4

3 に答える 3

0

これは、ディレクティブに属性を設定して何を監視するかを指示することで実現しました。したがって、ディレクティブ内に依存関係はありませんでした (attr を除く)。

 :parent controller
 $scope.searchResultsLength = searchResults.length (or anything you choose || or an empty object)

:html
 <pagelister pages="searchResults" watch="searchResultsLength">

:inside directive controller
return {        
    replace: false,
    transclude: true,
    scope: true, //important
    controller: function($scope, $element) {
            $scope.$watch($element[0].getAttribute("watch"), fn);
 ...

アイデアにはほど遠いですが、このディレクティブをどこにでもドロップでき、ng-repeat をラップして自動更新を管理できることを意味します

于 2013-09-13T13:18:39.120 に答える
0

ディレクティブスコープビンギングを使用して、必要情報をディレクティブに渡すことはどうですか。

すこし：

<pagelister pages="searchResults"> ... transcluded template</pagelister>
...
scope: { pages: '=' },
link: function(scope, element, attrs) { 
  scope.$watch('pages', ...)
于 2013-01-05T14:19:13.760 に答える
0

ディレクティブが独自の子スコープまたは独自の分離スコープを作成していない場合、ディレクティブは searchResults 配列にアクセスできます。リンク関数は単純に長さを監視できます。

link: function(scope, element, attrs) {
    scope.$watch('searchResults.length', function(newLength) { ... } );
于 2012-12-30T04:19:49.223 に答える