Question

我有两个DIV，其中包含一些使用ng-repeat的项目列表。我需要在第一个DIV中单击一个DIV后突出显示相同的项目，然后在第二个DIV中移动滚动条以在屏幕上显示项目，以防它不可见。

突出显示工作正常，但我不能仅通过更改属性来移动滚动条。我尝试使用名为“scroll”的过滤器来处理类更改，但是我无法访问里面发生类更改的元素。（我不能在过滤器中执行类似“element.parentNode.parentNode.scrollTop = element.offsetTop”的操作。）

可以为每个LI元素创建ID，将其传递给过滤器并使用document.getElementById。它可以工作，但它对我的项目来说不够灵活（应该有更多的DIV可以滚动）。

如何获取正在进行类更改的HTML元素？

提前致谢。

代码：

<div id="figure">
  <div ng-repeat="item in items" ng-click="highlight(item)" ng-class="item.selected">...</div>
</div>
<div id="list">
  <ul>
    <li ng-repeat="item in items" ng-class="item.selected | scroll">...</li>
  </ul>
</div>

Answer 1

我自己找到了。

需要使用指令，链接和$ watch。并添加一个＆＃34;链接＆＃34;对于每个LI元素

脚本：

app.directive("dirRowScroll", function()
{
  function link($scope, element, attributes){
    $scope.$watch(attributes.ngClass, function(attr){
      if(attr === "selected") element[0].parentNode.parentNode.scrollTop = element[0].offsetTop;
    });
  }
  return({link:link});
});

HTML：

<ul>
  <li ng-repeat="item in items" dir-row-scroll ng-class="item.selected">...</li>
</ul>

在AngularJS中的ng-class更改期间访问元素

1 个答案: