Question

var app = angular.module("app", ['ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('home', {
    url: '/',
    views: {
      "main": {
        controller: 'HomeController',
        templateUrl: 'home.tpl.html'
      }
    }
  });
  $stateProvider.state('signin', {
    url: '/signin',
    views: {
      "body": {
        controller: 'SigninController',
        templateUrl: 'signin.tpl.html'
      }
    }
  });
}]);

stuff.js

<html>
  [...]
  <body>
    <div ui-view="body">
      <header>[...]</header>
      <div ui-view="main">[... home.tpl.html ...]</div>
    </div>
    <div ui-view="body">
      [... signup.tpl.html ...]
    </div>
  </body>
</html>

我在进行状态转换时禁用了javascript，这是我在浏览器检查器中看到的......

signin

我很震惊地看到ui-router实际上复制了ui-view并在删除旧视图之前创建了一个视图。

显然，这会导致在从home导航到class="ng-enter ng-enter-active"时， BOTH 视图的组合显示至少两秒的问题。在所有测试的浏览器上，此行为是相同的。有没有办法告诉/强制/欺骗ui-router在加载另一个视图之前完全删除一个视图的模板？

这类似于：Preventing duplicate ui-view in AngularJS，答案可能也适用于我的情况。

修改

第一个div有class="ng-leave ng-leave-active"，下一个div有id|buyerid|prodid|price|status回答。

Answer 1

我也注意到了这一点。这个答案：Angularjs - ng-cloak/ng-show elements blink表示ng-cloak是票，但我无法在这种情况下使用它。

我不确定你是如何在你的路线之间移动的，但你可以在第一个视图使用的模型上设置属性为true，并在整个视图中使用该变量使用ng-show。然后，当您准备好移动到第二个视图时，将该变量设置为false。我正试图自己解决这个问题，如果找到更优雅的解决方案，我会报告回来。

ui-router在转换期间复制ui-view

修改

1 个答案: