AngularJS通过id访问ng-repeat内的DOM元素

Question

我有一个情况，需要在控制器内部操纵CSS - 我知道这有点不太好，但在这种情况下是必要的，如下所述。

我在ng-repeat中的列表元素中包含了一个标题和一个描述。我想根据标题div的高度给描述添加一个CSS类。

然而，当我尝试通过id在控制器内获取'title' div的高度时，它总是只获取第一个元素内部div的高度。当我获取标题的文本时，可以明显地看到这一点。控制器代码如下：

$scope.getClass = function() {

  var title = document.getElementById('title');
  var titleHeight = window.getComputedStyle(title, null).getPropertyValue("height");
  var titleText = document.getElementById('title').textContent;

  if(titleHeight == '50px') {
    return 'description-small';
  }
  else if(titleHeight == '25px') {
    return 'description-large';
  }

};

HTML的代码如下：

<ul>
  <li class="li-element" ng-repeat="item in itemList">      
    <div id="title" class="title" data-ellipsis data-ng-bind="item.title"></div>
    <div class="{{getClass()}}" data-ellipsis data-ng-bind="item.description"></div>    
  </li> 
</ul>

因此，根据列表中第一项是否有超过1或2行的标题，所有后续描述都会获得第一项所需的高度，而不管它的标题有多高/小。

我认为这与ng-repeat的工作方式有关，但我还很新手，不知道如何解决它 - 有什么想法吗？

我创建了一个plnkr来展示问题：http://plnkr.co/edit/G1QEq62CbJ0HpNZ0FfSm

控制器操作DOM的原因：

我有一个标题和一个描述。 标题可以是1-2行高，具体取决于标题的长度。 如果它不能放在2行上，我将使用“data-ellipsis”指令在标题的末尾放置省略号。 同样，对于任何溢出的描述，也会使用“data-ellipsis”。

在标题和描述之间，它们需要组合成125px的高度。但是因为我们不知道标题有多高，所以我们不知道如何设置描述的高度。'data-ellipsis'指令取决于CSS中设置的高度值。

因此，我需要根据标题高度动态设置描述类。如果有其他方法可以解决这个问题，我很乐意了解！

以下是数据省略指令的链接: https://github.com/dibari/angular-ellipsis

- Tom O'Brien

---

你不应该在控制器中操纵DOM。当然，你也不能有重复的id。 “如果有其他方法解决这个问题，我很愿意找到！”首先，你可以只用CSS来做到这一点。但是，如果使用JS，则需要编写指令并保持控制器的清洁。 - dfsq

如何只用 CSS 实现这个功能呢？ellipsis 指令需要知道高度才能执行省略操作。此外，我以前从未编写过指令，并且为了完成这个小作品，我需要花费很多时间去学习。 - Tom O'Brien

Answer 1

问题在于您将相同的id分配给多个div。 getElementById返回具有id title的第一个div。解决方案很简单，向id添加索引。使用ng-attr-id，我们可以为ng-repeat块中的每个div动态创建id。 $index变量提供了ng-repeat块的当前索引。然后，我们将$index传递给getClass函数，使得getClass知道我们正在谈论哪个标题。
Plunkr

更新您的代码

ng-repeat

<li class="li-element" ng-repeat="item in itemList">

            <div ng-attr-id="{{'title'+$index}}" class="title" data-ellipsis data-ng-bind="item.title"></div>

            <div class="{{getClass($index)}}" data-ellipsis data-ng-bind="item.description"></div>

 </li>

getClass

$scope.getClass = function(i) {

        var title = document.getElementById('title'+i);
        var titleHeight = window.getComputedStyle(title, null).getPropertyValue("height");
        var titleText = title.textContent;

        if(titleHeight == '50px') {
            console.log("titleheight = 62px");
            console.log("titleText = " + titleText);
            return 'description-small';
        }
        else if(titleHeight == '25px') {
            console.log("titleheight = 31px");
            console.log("titleText = " + titleText);
            return 'description-large';
        }

    };

- Daniel Kobe