angular简单的ui-view嵌套及传参

最新推荐文章于 2021-06-24 00:16:47 发布

weixin_30877227

最新推荐文章于 2021-06-24 00:16:47 发布

阅读量267

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/web-wangmeng/p/6610827.html

版权

index.html是根页面，activity.html,login.html是index.html的子视图，enroll.html是activity.html的子视图。

index.html

1 <body ng-app='activityApp'>
2     <div ui-view></div>
3     <div ui-view="login"></div>
4 </body>

activity.html

1 <div>
2     <div> 活动页 </div>
3     <div ui-view></div>
4 </div>

<div>
    <div> 登录页 </div>
</div>

enroll.html

1 <div>
2     <div>报名页 </div>
3 </div>

activity.js

红色字体部分表示传递的参数，注意state中含有views和不含views的情况下params所在位置。

 1  $stateProvider.state('activity', {
 2     url: '/activity',
 3     templateUrl: 'activity.html',
 4     controller: 'activityController'
 5   }).state('activity.login', {
 6     url: '/activity-login',
 7     views: {
 8       'login@': {
 9         templateUrl: 'activity-login.html',
10         controller: 'loginController'
11       }
12     }
13     params:{
14        'token' : null
15     }
16   }).state('activity.enroll', {
17     url: '/activity-enroll',
18     templateUrl: 'activity-enroll.html',
19     controller: 'enrollController',
20     params:{
21        'requires' : null
22      }
23     }
24   }).

在loginController,enrollController中注入$stateParams,分别使用$stateParams.token、$stateOarams.requires获取参数的值。

转载于:https://www.cnblogs.com/web-wangmeng/p/6610827.html

weixin_30877227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular简单的ui-view嵌套及传参

index.html是根页面，activity.html,login.html是index.html的子视图，enroll.html是activity.html的子视图。index.html1 <body ng-app='activityApp'>2 <div ui-view></div>3 <div ui-vie...
复制链接

扫一扫