[英]AngularJS nested controllers
I have an AngularJS app with 2 routes /home and /about . 我有一个带有2条路线/ home和/ about的AngularJS应用。
I'm using ng-router and each route has different controllers HomeCtrl and AboutCtrl. 我正在使用ng-router,每个路由都有不同的控制器HomeCtrl和AboutCtrl。 The default route is /home .
默认路由为/ home 。
The thing is that before display the content I want to add a preloader, just a simple div which will hide when the content is loaded. 问题是在显示内容之前,我想添加一个预加载器,只是一个简单的div,它将在加载内容时隐藏。
<div class="myApp">
<div class="preloader"></div>
<div ui-view></div>
</div>
My question is, in which controller should I add this? 我的问题是,我应该在哪个控制器中添加它? Should I add a new controller outside the ng-view for this kind of stuff?
我是否应该在ng-view之外添加此类新控制器?
Can someone explain me best practice? 有人可以解释我的最佳做法吗?
I suppose the best way to do this is to use flag for data loaded indication directle in controller. 我想做到这一点的最佳方法是对控制器中的数据加载指示方向使用标志。 So depend on this flag with ng-if directive you can show 'div' with loading indicator if dataLoadedFlag is false and div with your data otherwise.
因此,如果此参数与ng-if指令相关,则可以在dataLoadedFlag为false时显示带有加载指示符的“ div”,否则可以与数据一起显示div。
You have ng-view, and your views render over there with its corresponding controller. 您具有ng-view,并且您的视图及其相应的控制器在该位置渲染。
So the only thing you need ng-if 因此,您唯一需要的是ng-if
<ng-view>
<div ng-if="!$scope.contentIsReady">
content loading
</div>
<div ng-if="$scope.contentIsReady">
content here
</div>
</ng-view>
@Hiero In your case of course, you have to create new controller. @Hiero当然,您必须创建新的控制器。
Also you can use nested views. 您也可以使用嵌套视图。 Something like this:
像这样:
$stateProvider.state('home', {
url: '/home',
views: {
"main": {
templateUrl: '....',
controller: '....'
},
'view-with-data@home': {
templateUrl: '...',
controller: '...',
}
}
});
See more at https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views 在https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views中查看更多信息
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.