Angular js - 值更改時突出顯示dom
[英]Angular js - Highlight dom when value changes
問題描述
角度noobie在這里。 我想知道當范圍中的值通過某種方式改變時，更改dom的最佳方法是什么。 我讀到將dom操作邏輯放在控制器中並且這是指令的工作並不好。
這是一個傻瓜
http://plnkr.co/edit/xWk5UBwifbCF2raVvw81?p=preview
基本上，當通過單擊上面的plunkr中的加載數據按鈕更改數據時，我希望其值更改的單元格自動突出顯示。 我不能讓它為我的生活工作。
有幫助嗎？
3 個解決方案
解決方案1
27 已采納 2013-11-21 09:06:25
我認為觀察每個熒光筆的具體價值而不是觀察整個集合會更好。 例如：
<td highlighter="person.firstName">{{ person.firstName }}</td>
這樣， 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);
}
});
}
};
}]);
雖然，為了這個工作，你必須告訴角度數據實際上已經改變。 目前，這是並非如此，因為角度的軌道people通過對象的身份。 在您覆蓋它的那一刻，angular將刪除所有相關的dom元素。 為了適應這種情況，請使用：
ng-repeat="person in people track by $index"
這將告訴angular將數組的索引視為標識。
解決方案2
6 2014-05-31 02:48:43
感謝您發布上述答案。 我注意到，如果值頻繁更改，動畫將閃爍，並且當另一個動畫已經激活時，將觸發超時。
如果已設置超時，我已通過重置超時來解決此問題。
另外，我添加了代碼來檢查值是增加還是減少，並設置不同的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();
}
}
});
}
};
}]);
解決方案3
3 2016-07-11 14:16:09
經過一番閱讀后，我注意到考慮到性能，使用$watch有一些疑問。 我發現使用$observe另一個解決方案。
關於$watch和$observe好讀物： https ： //stackoverflow.com/a/14907826/2901207
JavaScript的：
var app = angular.module('angularjs-starter', []);
app.directive('highlightOnChange', function() {
return {
link : function(scope, element, attrs) {
attrs.$observe( 'highlightOnChange', function ( val ) {
console.log("Highlighting", val);
element.effect('highlight');
});
}
};
});
app.controller('myController', function($scope, $timeout) {
$scope.val = 1;
$scope.updateVal = function() {
$scope.val = $scope.val + 1;
};
});
HTML：
<body ng-controller="myController">
<div highlight-on-change="{{val}}">
Total: {{ val }}
</div>
<button ng-click="updateVal()">Add to Total</button>
</body>
原始來源： http ： //plnkr.co/edit/FFBhPIRuT0NA2DZhtoAD？p =來自這篇文章的評論： https ： //groups.google.com/d/msg/angular/xZptsb-NYc4/YH35m39Eo2wJ
更復雜的用法，對我來說非常合適，因為它會在更新到來時突出顯示特定列。
<table class="table table-hover">
<tr>
<th ng-repeat="col in fc.tableColumns"><!--fc is a controller-->
{{col.displayName}}
</th>
</tr>
<tr ng-repeat="item in fc.items track by item.id">
<td highlight-on-change="{{value}}" ng-repeat="(key,value) in item">
@*{{key}} =*@ {{value}}
</td>
</tr>
</table>
正如我所說，更新特定列，同時在控制器中的某個位置執行此操作。
items[index] = item;//item from server
Angular JS：值更改時更新指令
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.