一尘不染

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

angularjs

这里有角的noobie。我想知道当范围中的值以某种方式更改时更改dom的最佳方法是什么。我读到将dom操纵逻辑放入控制器中并不是很好,这就是指令的工作。

这是一个小矮人

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

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

有什么帮助吗?


阅读 189

收藏
2020-07-04

共1个答案

一尘不染

我认为最好是观察每个 荧光笔 的具体价值,而不是观察整个收藏夹。例如:

<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);
        }
      });
    }
  };
}]);

但是,要使此工作有效,您必须告诉Angle数据实际上已更改。当前,people按对象身份的角度轨迹不是这种情况。覆盖它的那一刻,angular将删除所有关联的dom元素。为此,请使用:

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

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

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

2020-07-04