Question

我正在尝试创建一个包含多个视图的单页面应用程序（页眉，页脚，侧边栏，主页......）每个视图都有一些动画（js脚本），首先所有组件都附加到index.js，但在使用Router-ui并分离视图后，我发现动画不再起作用了（jquery，bootstrap.js ......）

这是index.html中的脚本：

<!-- Jquery -->
<script src="js/jquery-1.10.2.min.js"></script>

<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>

<!-- Modernizr -->
<script src='js/modernizr.min.js'></script>

<!-- Pace -->
<script src='js/pace.min.js'></script>

<!-- Popup Overlay -->
<script src='js/jquery.popupoverlay.min.js'></script>

<!-- Slimscroll -->
<script src='js/jquery.slimscroll.min.js'></script>

<!-- Cookie -->
<script src='js/jquery.cookie.min.js'></script>

以下是一个视图示例：

$stateProvider
  .state('main', {
    abstract: true,
    views: {
      'header': {
        templateUrl: 'components/partials/header.html'
      },
      'sidebar': {
        templateUrl: 'components/partials/sidebar.html'
      }
    }
  })
  .state('chat', {
    url: '/chat',
    parent: 'main'
      views: {
        'main@': {
          templateUrl: 'components/chat/chat.html',
          controller: 'ChatController',
          controllerAs: 'chatCtrl'
        }
      }
  });

有一种方法可以告诉angular等待所有脚本加载？或者是一个图书馆，以方便我的任务，如果是，请举例，谢谢。

Answer 1

将ng-cloak指令添加到uiview容器应该使角度等待直到内容加载完毕才会显示。

<div ui-view ng-cloak></div>

有关其他信息，请参阅https://docs.angularjs.org/api/ng/directive/ngCloak。

P.S。对不起，我无法发表评论

Angular router-ui视图在JS Scripts之前呈现

1 个答案: