2016-04-18 14 views
0

私はサーバーから新しい行をクライアントにプッシュできるテーブルを持っています。列の一部に私はディレクティブを使用しています:新しいアイテムを挿入するとディレクティブウォッチがトリガーされる

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が間違っているためです。

編集:ほんの少しだけ明確になります。 newValueoldValueは、私が新しい行をプッシュするときにはundefinedではありません。

+0

'OLDVALにそれを変更めちゃくちゃ取得します'と' newVal'はどちらも 'undefined'で始まります。だから初めてデータを設定するときには、もちろんnewValが実際のデータを持っているため、時計が起動します。 – senschen

+0

私がデバッグするとき、私はそれが 'undefined 'ではないことが分かります。そして、それは前方に進み、CSSクラスを – MrProgram

答えて

0

は、これは一種私が悪い間違いだった...もちろん、それがすべて台無しに取得し、track by $indexはup..Iがtrack by row.Id

0

これは、oldValueが未定義/ nullである可能性がありますが、次にparseFloatは処理可能なものに変換します。多分parseFloatの周りのoldValueの動作を調べようとしますか?私は行を保持配列を変更したときに

関連する問題