私はサーバーから新しい行をクライアントにプッシュできるテーブルを持っています。列の一部に私はディレクティブを使用しています:新しいアイテムを挿入するとディレクティブウォッチがトリガーされる
angular.module('app').directive('highlighter', ['$timeout', function ($timeout) {
return {
restrict: 'A',
scope: {
model: '=highlighter'
},
link: function (scope, element) {
scope.$watch('model', function (newValue, oldValue) {
var nv = parseFloat(newValue);
var ov = parseFloat(oldValue);
if (nv !== ov) {
if (nv > ov) {
// apply class
element.addClass('highlightUp');
// auto remove after some delay
$timeout(function() {
element.removeClass('highlightUp');
}, 2000);
} else {
// apply class
element.addClass('highlightDown');
// auto remove after some delay
$timeout(function() {
element.removeClass('highlightDown');
}, 2000);
}
}
});
}
};
}]);
これに伴う問題は、私は、サーバー側からテーブルに新しい行を押し出すときにそれらのいくつかは、それが初めてだにもかかわらず、時計をトリガーするということです何も変わっていない。
<tbody>
<tr dir-paginate="row in vm.rows
| filter:searchText
| filter:row.IsVisible
| orderBy:sortRows:vm.sortReverse
| itemsPerPage:vm.pagination.pageSize track by $index"
data-ng-click="toggleNode(row)"
data-ng-show="row.IsVisible">
<td ng-repeat="column in vm.columns">
<span ng-if="shouldBeHighlighted">{{renderCellValue(row, column)}}</span>
</td>
</tr>
</tbody>
それはplunkerでこれを再現するためには少し難しいですが、アイテムが最初に挿入されたときに、時計をトリガすることができ、今どのようにanyonyていますか?値(newValue、oldValue)はどこから来ますか? oldValueが間違っているためです。
編集:ほんの少しだけ明確になります。 newValue
とoldValue
は、私が新しい行をプッシュするときにはundefined
ではありません。
'OLDVALにそれを変更めちゃくちゃ取得します'と' newVal'はどちらも 'undefined'で始まります。だから初めてデータを設定するときには、もちろんnewValが実際のデータを持っているため、時計が起動します。 – senschen
私がデバッグするとき、私はそれが 'undefined 'ではないことが分かります。そして、それは前方に進み、CSSクラスを – MrProgram