分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了angularjs – 滚动到给定项目的角度指令，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我有一个作用域变量$ scope.first_unread_id在我的控制器中定义。在我的模板中，我有：

<div id="items" >
  <ul class="standard-list">
    <li ng-repeat="item in items" scroll-to-id="first_unread_id">
    <span class="content">{{ item.content }}</span>
    </li>
  </ul>
</div>

我的指令看起来像：

angular.module('ScrollToId',[]).
directive('scrollToId',function () {
  return function (scope,element,attributes) {
    var id = scope.$parent[attributes["scrollToId"]];
    if (id === scope.item.id) {
      setTimeout(function () {
        window.scrollTo(0,element[0].offsetTop - 100)
      },20);
    }
  }

});

它的工作原理，但是，两个问题：

>是否有一个更好的方法使“first_unread_id”从控制器范围直接到询问范围。这似乎有点“icky”。我希望我可以通过视图直接作为一个参数w / o必须重复的li元素。
>有没有更好的方法来避免setTimeout()调用的需要？没有它，它有时工作 – 我想象由于布局的时间的差异。我理解我使用的语法是定义一个链接功能 – 但是我不清楚，如果这是一个前或后链接默认 – 如果这甚至对我的问题。

>你不应该需要范围$ parent – 因为它将继承父范围的值，当它在父范围中更改时，它将被向下传递。
>默认是后链接功能。你有一些图像或东西加载，将使页面布局在初始加载后不久更改？你试过一个setTimeout没有时间，例如setTimeout(function(){})？这将确保这将“一次”一切完成。
>我也会改变你的指令的逻辑，使它更一般。如果给定条件为真，我将滚动到元素。

这里是这3个变化：

html：

<div id="items" >
  <ul class="standard-list">
    <li ng-repeat="item in items" scroll-if="item.id == first_unread_id">
      <span class="content">{{ item.content }}</span>
    </li>
  </ul>
</div>

JS：

app.directive('scrollIf',attributes) {
    setTimeout(function () {
      if (scope.$eval(attributes.scrollIf)) {
        window.scrollTo(0,element[0].offsetTop - 100)
      }
    });
  }
});