angular簡單的ui-view嵌套及傳參

時間 2019-11-13

原文原文鏈接

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.htmlhtml

1 <div>
2     <div> 活動頁 </div>
3     <div ui-view></div>
4 </div>

<div>
    <div> 登陸頁 </div>
</div>

enroll.htmlide

1 <div>
2     <div>報名頁 </div>
3 </div>

activity.js字體

紅色字體部分表示傳遞的參數，注意state中含有views和不含views的狀況下params所在位置。ui

 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獲取參數的值。url

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。