这里有角的noobie。我想知道当范围中的值以某种方式更改时更改dom的最佳方法是什么。我读到将dom操纵逻辑放入控制器中并不是很好,这就是指令的工作。
这是一个小矮人
http://plnkr.co/edit/xWk5UBwifbCF2raVvw81?p=preview
基本上,当通过单击上面的plunkr中的“加载数据”按钮更改数据时,我希望其值更改为的单元格自动突出显示。我无法让它为我的一生工作。
有什么帮助吗?
我认为最好是观察每个 荧光笔 的具体价值,而不是观察整个收藏夹。例如:
<td highlighter="person.firstName">{{ person.firstName }}</td>
这样,highlighter-directive可能非常简单,例如:
highlighter
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元素。为此,请使用:
people
ng-repeat="person in people track by $index"
这将告诉angular将数组的索引视为身份。
演示:http://jsbin.com/vutevifadi/1/