AngularJS 嵌套控制器

AngularJS nested controllers

本文关键字：控制器 嵌套 AngularJS      更新时间：2023-09-26

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

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

问题是，在

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

  <div class="myApp">
    <div class="preloader"></div>
    <div ui-view></div>    
  </div>

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

有人可以解释我的最佳实践吗？

我想最好的

方法是在控制器中直接使用标志加载数据指示。因此，依靠带有ng-if指令的这个标志，如果dataLoadedFlag为假，则可以显示带有加载指示器的"div"，否则可以使用您的数据显示div。

你有 ng-view，你的视图使用其相应的控制器在那里呈现。

所以你唯一需要的 ng-if

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

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

相关文章：