AngularJS嵌套控制器

我有一個2路線的AngularJS應用程序/首頁和/約。AngularJS嵌套控制器

我使用ng-router，每條路由有不同的控制器HomeCtrl和AboutCtrl。默認路線是/首頁。

事情是，在顯示內容之前，我想添加一個預加載器，只是一個簡單的div，當內容加載時會隱藏。

<div class="myApp"> 

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

    <div ui-view></div>  

    </div>

我的問題是，我應該在哪個控制器中添加這個？我應該在ng-view之外爲這種東西添加一個新的控制器嗎？

有人可以解釋我的最佳做法嗎？

來源

2016-02-26 Hiero

可以觸發多種不同的方式在一個指令 – charlietfl

我想這樣做的最好方法是使用數據加載指示在控制器中的標誌。因此，如果data-LoadedFlag爲false，則可以使用ng-if指令依賴此標誌，如果dataLoadedFlag爲false，則可以使用加載指示器顯示「div」，否則請使用div。

來源

2016-02-26 14:08:48

但問題是，預加載其外部UI視圖http://jsbin.com/lebakurewa/1/edit？html，輸出 – Hiero

你有ng-view，你的視圖在那裏用相應的控制器進行渲染。

所以你需要NG-如果

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

來源

2016-02-26 14:09:26

但是preloader div在ui-view之外，它的東西就像這樣http://jsbin.com/lebakurewa/1/edit?html,output – Hiero

所以把它放在ng-view –

hm ，你確定它的最佳做法？如果在路由器中使用「解析」， – Hiero

@Hiero的唯一的事情在你的課程時，你必須創建新的控制器。

你也可以使用嵌套視圖。事情是這樣的：

$stateProvider.state('home', { 
     url: '/home', 
     views: { 
      "main": { 
       templateUrl: '....', 
       controller: '....' 
      }, 
      '[email protected]': { 
       templateUrl: '...', 
       controller: '...', 
      } 
     } 
    });

多見於https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views

來源

2016-02-26 14:16:14

AngularJS嵌套控制器

回答

相關問題