访问url[材质Ui+选项卡]时,Angular Ui路由器未加载视图
Angular Ui Router not loading view when accessing url [material-ui + tabs]
我使用的是Angular+material ui,基本上我想用不同的步骤来完成入职流程,所以我使用tabs指令,每个指令都有不同的ui-view
。
Html:
<div ng-controller="TabsCtrl" class="content" ng-show="$root.loadingComplete">
<md-tabs md-selected="$root.selectedIndex" md-border-bottom class="md-primary">
<md-tab id="tab1" md-on-select="goTo('start')">
<md-tab-label>Welcome</md-tab-label>
<md-tab-template>
<md-content>
<div ui-view="vStart"></div>
</md-content>
</md-tab-template>
</md-tab>
<md-tab id="tab2" md-on-select="goTo('personal')">
<md-tab-label>Personal</md-tab-label>
<md-tab-template>
<md-content>
<div ui-view="vPersonal"></div>
</md-content>
</md-tab-template>
</md-tab>
这是我的路线配置:
angular.module('onboarding').config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
url: '/:memberId',
views: {
vStart: {
templateUrl: 'views/start.html',
controller: 'StartCtrl'
}
}
})
.state('personal', {
url: '/:memberId/personal',
views: {
vPersonal: {
templateUrl: 'views/personal.html',
controller: 'PersonalCtrl'
}
}
})
...
功能goTo(状态):
$scope.goTo = function(state) {
$state.transitionTo(state, $stateParams);
};
问题主要是,如果我打开url localhost:9000/#/12345
上的"主页",它工作正常,我看到了开始视图,我可以用切换到个人视图
$rootScope.selectedIndex = 1;
$state.transitionTo('personal', $stateParams);
但是,如果我直接从localhost:9000/#/12345/personal
打开url,则不会发生任何事情,视图也不会加载,控制器也不会加载。我有一个console.log('start controller')
和相同的console.log('personal controller')
在加载时要检查。
此外,浏览器历史记录也不起作用,例如,我转到起始页locahost:9000/#/12345
,然后单击按钮转到localhost:9000/#/12345/personal
,一切正常,但如果我返回浏览器历史记录,url是localhost:9000/#/1245
(正确),但视图完全为空,根本没有加载控制器。
您的路由似乎已关闭。UI路由器将子状态的url附加到其父状态。
尝试删除标题/:memberId
:
.state('personal', {
url: '/personal',
views: {
vPersonal: {
templateUrl: 'views/personal.html',
controller: 'PersonalCtrl'
}
}
})
相关文章:
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 混合 ui-sref 和 $state.go 在 Angular ui-router 中进行状态转换
- 如何在Angular UI网格中选择下一行
- 使用按钮的Angular UI网格过滤器
- Angular UI启动日期选择器问题
- 包括angular 1.3.0项目上的angular bootstrap ui
- 在Angular ui路由器中,如何将事件从一个视图发送到另一个视图
- 带有嵌套状态的Angular ui路由器和后退按钮
- OnsenUI、Angular和在警报对话框后刷新UI组件
- Angular UI-GRID未在页面上显示网格
- 初始化ng模型时,Angular ui选择占位符不起作用
- Ionic + Angular ui-sref not generating href
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Angular ui路由器中的绝对名称
- Angular+bootstrap ui,检查当前选项卡是否已处于活动状态
- 如何在angular bootstrap ui中聚焦活动导航选项卡中的拳头输入字段
- Angular JS/UI Router:为给定状态禁用指令
- 在模态(bootstrap ui angular)中编辑现有联系人
- 使用帐户登录ui angular dons't刷新$account.currentUser
- 使用ONSEN UI + Angular上传个人资料照片