Question

我试图写一个分页指令，但要做到这一点，我需要知道有多少元素被转换，所以HTML看起来像这样

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

（这是一个简单的例子 - 代码被转换可能是任意复杂的。）

该指令必须注意......某些内容，因此它可以重新计算页数。

编辑抱歉，该代码未被代码视为。我希望上面的代码将列表中的名称分解为10长的页面并添加一些不错的next / prev按钮。

问题是当调用指令的link函数时，div尚未展开。我通过将更改推迟到DOM来“修复” - 但这仅适用于第一次时间。如果$ scope.searchResults（或被转换代码观察到的任何其他内容）发生变化，我需要重新调整DOM。我只需要知道它是什么时候。

Answer 1

如果您的指令没有创建自己的子作用域或其自己的隔离范围，则该指令可以访问searchResults数组。链接功能可以简单地观察长度：

link: function(scope, element, attrs) {
    scope.$watch('searchResults.length', function(newLength) { ... } );

Answer 2

如何使用指令范围绑定将必要信息传递给指令。

有点：

<pagelister pages="searchResults"> ... transcluded template</pagelister>
...
scope: { pages: '=' },
link: function(scope, element, attrs) { 
  scope.$watch('pages', ...)

Answer 3

我通过在指令上设置一个属性来告诉它要注意什么来实现这一点 - 因此指令中没有依赖项（除了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并管理自动更新

如何观察指令的被转换元素？

3 个答案: