问题描述
我正在尝试使用抽象状态,但无法加载子级.
我的应用设置如下:
角度.module('milordApp', ['ui.router','ngAnimate','ngCookies','ngMessages','ngResource','ngRoute','ngSanitize','ngTouch']).run(function($rootScope) {$rootScope.$on('$routeChangeStart', function(event, toState, toParams, fromState, fromParams) {console.log(toState, toParams, fromState, fromParams);});}).config(function($stateProvider, $urlRouterProvider){$urlRouterProvider.otherwise("/login");$stateProvider.state('登录', {网址:'/登录',templateUrl: 'views/login.html',控制器:'登录Ctrl',数据: {要求登录:假}}).state('应用程序', {摘要:真实,网址:'/应用',数据: {要求登录:true}}).state('app.dashboard', {网址:'/仪表板',templateUrl: 'views/dashboard.html',控制器:'DashboardCtrl',});});
登录路径工作正常.但是,应用程序或 app.dashboard 路由未注册,因为我什至无法从控制器获取 console.log.
请注意 index.html 正在正确创建导航
<li><a ui-sref="login" href="#/login">登录</a></li><li><a ui-sref="app.dashboard" href="#/app/dashboard">仪表板</a></li>
如果抽象状态的片段是真实的(按原样),问题应该像这样解决:
.state('app', {摘要:真实,网址:'/应用',数据: {要求登录:true}//为孩子添加模板模板: "
",})
简单来说,每个状态都需要注入到某个地方.如果我们不使用命名视图(甚至绝对命名),则预期:
每个孩子都被注入到其父目标ui-view
I'm trying to use an abstract state but I cannot load the child.
My app is setup as following:
angular
.module('milordApp', [
'ui.router',
'ngAnimate',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.run(function($rootScope) {
$rootScope.$on('$routeChangeStart', function(event, toState, toParams, fromState, fromParams) {
console.log(toState, toParams, fromState, fromParams);
});
})
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl',
data: {
requireLogin: false
}
})
.state('app', {
abstract: true,
url: '/app',
data: {
requireLogin: true
}
})
.state('app.dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl',
});
});
The login route is working fine. However, the app or app.dashboard route does not register as I can't even console.log from the controller.
Just a note that the index.html is creating the navigation correctly
<ul class="nav navbar-nav">
<li><a ui-sref="login" href="#/login">Login</a></li>
<li><a ui-sref="app.dashboard" href="#/app/dashboard">Dashboard</a></li>
</ul>
In case that snippet of the abstract state is real (as is), the issue should be fixed like this:
.state('app', {
abstract: true,
url: '/app',
data: {
requireLogin: true
}
// add template for child
template: "<div ui-view></div>",
})
Simply, every state needs to be injected somewhere. If we do not use named views (or even absolute naming) it is expected that:
这篇关于AngularJS UI-Router:抽象状态+子状态不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!