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