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

【问题标题】：Access to the element during ng-class change in AngularJS在 AngularJS 中的 ng-class 更改期间访问元素
【发布时间】：2014-04-15 14:15:18
【问题描述】：

我有两个 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>

【问题讨论】：

标签： angularjs

【解决方案1】：

我自己找到的。

需要用到指令、链接和$watch。并为每个 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>

【讨论】：