Javascript 如何避免视图在角度更新后闪烁旧值？

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

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

和应用程序组件内的导航组件，它只有一个变量绑定到应用程序组件内的导航列表：

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

然后闪现：

NewValue OldValue

最后：

NewValue

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

您可以尝试以下方法：

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

---

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

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

---

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

您不想同时保留（旧的和新的）价值吗？请注意，我尝试这一个是为了测试它。它以正确的方式更新。但只有视图会直接改变。它应该从'oldValue'->'newValue'更改，在我看来，它的更改类似于'oldValue'->'newValue-oldValue'->'newValue'。最终结果是正确的，但视图闪烁。抱歉，我的意思是不会直接更改。然后我建议在绑定值时清除以前的值：例如：$scope.myName=“”；你的意思是给navList分配一个空值吗？我应该把代码放在哪里？如果我不断地更改它，它仍然不起作用。您可以在控制器中的任何位置写入

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

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