Question

我有一个名为“anotherWay”的指令，它监听某个事件，然后尝试动态地将一个类添加到表行。

这可以在此plnkr文件customTable.js中看到 http://plnkr.co/edit/He11jnAYbDVShJEzHis8

但是当我使用该语句时，它无法附加该类。

element[0].rows[index].addClass('highlight');

任何线索如何解决这个问题？

Answer 1

尝试使用ng-class：

<tr ng-class="{'highlighted': highlightedRows[$index] == true}" ng-repeat="element in body">

然后在你的指令中：

angular.module('CustomTable').directive('anotherWay',[function(){
  return {
    link: function(scope,element,attrs,controller){
      scope.highlightedRows = {};
      scope.$on('downMovement',function(event,index){
        index = parseInt(index);
        console.log("Row that should be highlighted is :" + index);
        scope.highlightedRows[index] = true;

      });

    } //end link

  }; // end return

}]);

Answer 2

不是遍历点击中的元素，而是随时更新scope.rowSelected，并向ng-class元素添加<tr />属性。

示例：

<tr ng-repeat="element in body" ng-class="{ highlight: rowSelected == $index }">

Plunker

Answer 3

addClass是一个jqLite函数，而不是DOM元素上的函数。

解决方案1 - Vanilla JS：

var row = element[0].rows[index];

if (row.classList) row.classList.add('highlight');
else row.className += ' ' + 'highlight';

解决方案2 - jqLite：

var row = element[0].rows[index];

angular.element(row).addClass('highlight');

将类动态添加到表中的特定行

3 个答案: