Question

在我的角应用程序中，有一个主应用程序组件，它有一个事件监听器：

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

在app组件中有一个导航组件，它只有一个变量绑定到app组件中的navList：

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

在navBar.html中，我使用ng-repeat显示＆＃39; list＆＃39;的数据：

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

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

原件：

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中更新视图后如何避免旧值闪现？

2 个答案: