如何避免在 Angular 中更新视图后旧值闪烁？

Question

在我的 angular 应用程序中，有一个具有事件侦听器的主要应用程序组件：

...
$scope.$on('page::change', function(e, value) {
  self.navList = value;
});
...

还有一个应用组件内的导航组件，它只有一个绑定到应用组件内的navList的变量：

app.component('navBar', {
  bindings: {
    list: '<',
  },
  templateUrl: 'templates/e/navBar.html',
  ...
});

里面navBar.html，我用ng-repeat来显示'list'的数据：

<nav>
    <a ng-repeat="(key,value) in Nav.list" ng-href="{{ value }}" ng-bind="key"></a>
</nav>

每当我在应用程序中更改 navList 的值，或者发出 'page::change' 事件时，数据视图将在网页中闪烁，如：

原文：

OldValue

然后闪现：

NewValue OldValue

然后最后：

NewValue

我应该如何解决这个问题？ anuglar的版本是1.5.8

Answer 1

你可以试试这个：

$scope.$watch('modelName' ,  function ( newValue, oldValue )  { 
  // access new and old value here
  console.log("Your former modelName was "+oldValue+", your current modelName value "+newValue+".");
});

Answer 2

我有时遇到同样的问题，我的解决方案是放置一个元素以避免对一个元素进行多次绑定：

<nav>
    <span ng-repeat="(key,value) in Nav.list">
       <a ng-href="{{value}}">{{key}}</a>
    </span>
</nav>

我不知道这对你的情况是否有帮助，但我可以试试。

如何避免在 Angular 中更新视图后旧值闪烁？

How to avoid old value flashed after view updated in Angular?

javascript

frontend

web

angularjs

angularjs-components