Question

我有一个AngularJS应用程序有2条路线 / home 和 / about 。

我正在使用ng-router，每条路由都有不同的控制器HomeCtrl和AboutCtrl。默认路线为 / home 。

问题是在显示我要添加预加载器的内容之前，只是一个简单的div，它将在加载内容时隐藏。

  <div class="myApp">

    <div class="preloader"></div>

    <div ui-view></div>    

  </div>

我的问题是，我应该在哪个控制器中添加它？我应该在ng-view之外为这种东西添加一个新的控制器吗？

有人能解释我的最佳做法吗？

Answer 1

我认为最好的方法是在控制器中使用数据加载指示directle。因此，使用ng-if指令依赖此标志，您可以显示＆＃39; div＆＃39;如果dataLoadedFlag为false，则加载指示符，否则为div。

Answer 2

你有ng-view，你的视图在那里用相应的控制器进行渲染。

所以你唯一需要的东西 - 如果

<ng-view>
  <div ng-if="!$scope.contentIsReady">
         content loading
  </div>
  <div ng-if="$scope.contentIsReady">
          content here
  </div>
</ng-view>

Answer 3

@Hiero当然，你必须创建新的控制器。

您也可以使用嵌套视图。像这样：

$stateProvider.state('home', {
        url: '/home',
        views: {
            "main": {
                templateUrl: '....',
                controller: '....'
            },
            'view-with-data@home': {
                templateUrl: '...',
                controller: '...',
            }
        }
    });

在https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

了解详情

AngularJS嵌套控制器

3 个答案: