如何避免在 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

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

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

我不知道这对你的情况是否有帮助，但我可能会尝试一下。

Answer 2

你可以试试这个：

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