AngularJS嵌套控制器

Question

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

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

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

  <div class="myApp">

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

    <div ui-view></div>    

  </div>

我的问题是，我应该在哪个控制器中添加它？ 我是否应该在ng-view之外添加此类新控制器？

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

Answer 1

我想做到这一点的最佳方法是对控制器中的数据加载指示方向使用标志。 因此，如果此参数与ng-if指令相关，则可以在dataLoadedFlag为false时显示带有加载指示符的“ div”，否则可以与数据一起显示div。

Answer 2

您具有ng-view，并且您的视图及其相应的控制器在该位置渲染。

因此，您唯一需要的是ng-if

<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中查看更多信息