Angular js - 值更改时突出显示dom

Question

Angular 新手在这里。 我想知道当范围内的值以某种方式发生变化时，更改 dom 的最佳方法是什么。我读到将 dom 操作逻辑放在控制器中并不好，这就是指令的工作。

这是一个小插曲

http://plnkr.co/edit/xWk5UBwifbCF2raVvw81?p=preview

基本上，当通过单击上面 plunkr 中的加载数据按钮更改数据时，我希望其值更改的单元格自动突出显示。我无法让它为我的一生工作。

有什么帮助吗？

Answer 1

我认为最好观察每个 highlighter 的具体值，而不是观察整个集合。例如：

<td highlighter="person.firstName">{{ person.firstName }}</td>

这样，highlighter-directive 可以非常简单，例如：

app.directive('highlighter', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    scope: {
      model: '=highlighter'
    },
    link: function(scope, element) {
      scope.$watch('model', function (nv, ov) {
        if (nv !== ov) {
          // apply class
          element.addClass('highlight');

          // auto remove after some delay
          $timeout(function () {
            element.removeClass('highlight');
          }, 1000);
        }
      });
    }
  };
}]);

不过，要使其正常工作，您必须告诉 Angular 数据实际发生了变化。目前情况并非如此，因为对象身份的角度轨道people。覆盖它的那一刻，angular 将删除所有关联的 dom 元素。为此，请使用：

ng-repeat="person in people track by $index"

这将告诉 Angular 将数组的索引视为身份。

演示：http://jsbin.com/vutevifadi/1/

Answer 2

感谢您在上面发布答案。我注意到如果值频繁更改，动画会闪烁，并且在另一个动画已经处于活动状态时会触发超时。

如果已设置超时，我已通过重置超时来解决此问题。

另外，我添加了代码来检查值是增加还是减少并设置不同的 css 类。

app.directive('newvalue', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.addClass('newvalue');
        scope.$watch(attrs.newvalue, function (nv, ov) {
        function settimeout() {
            attrs.timeout = $timeout(function () {
                element.removeClass('newvalue-up');
                element.removeClass('newvalue-down');
                attrs.timeout = null;
            }, 1000);
        }
        if (nv !== ov) {
            if(attrs.timeout) {
                //newvalue already set.. reset timeout
                $timeout.cancel(attrs.timeout);
                settimeout();
            } else {
                if(nv > ov) {
                    element.addClass('newvalue-up');
                } else {
                    element.addClass('newvalue-down');
                }
                settimeout();
            }
        }
      });
    }
  };
}]);