以下是示例代码。
http://plnkr.co/edit/jXEQ9xemL1A5b9KKKcAw?p=preview
var app = angular.module('npAdmin', ['ui.router']);
app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider',
function($httpProvider, $stateProvider, $urlRouterProvider) {
$stateProvider
.state('common', {
templateUrl: 'tpl.common.html',
abstract: true,
// views: {
// 'footer': {
// templateUrl: 'footer.html'
// }
// }
})
.state('common.dashboard', {
url: '/dashboard',
views: {
'content': {
template: '<div><h4>dashboard</h4></div>'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('common.crm', {
url: '/crm',
views: {
'content': {
template: '<div><h4>CRM</h4></div>'
},
'footer': {
templateUrl: 'footer.html'
}
}
})
.state('common.abc', {
url: '/abc',
views: {
'content': {
template: '<div><h4>ABC</h4></div>'
},
'footer': {
templateUrl: 'newfooter.html'
}
}
})
.state('landing', {
templateUrl: 'tpl.login.html',
abstract: true,
})
.state('landing.login', {
url: '/login',
template: '<div><h4>Wow</h4></div>',
});
$urlRouterProvider.otherwise('/crm');
}
]);
'templateUrl'
的默认'footer'
是'footer.html',但某些州的'newfooter.html'。
在这种情况下,有没有一种设置默认页脚的好方法?
我尝试同时使用'templateUrl'
和'views'
,但它不起作用。
答案 0 :(得分:1)
有updated plunker。我们可以在父“common”中使用绝对命名:
.state('common', {
abstract: true,
views: {
'': {
templateUrl: 'tpl.common.html',
},
'footer@common': {
templateUrl: 'footer.html'
}
}
})
仅在需要时覆盖它('dashboard'和'crm'将使用父页脚,而'abc'是定义覆盖 - 特殊的:newfooter.html)
.state('common.dashboard', {
url: '/dashboard',
views: {
'content': {
template: '<div><h4>dashboard</h4></div>'
},
// provided by parent
//'footer': {
// templateUrl: 'footer.html'
//}
}
})
.state('common.crm', {
url: '/crm',
views: {
'content': {
template: '<div><h4>CRM</h4></div>'
},
// provided by parent
//'footer': {
// templateUrl: 'footer.html'
//}
}
})
.state('common.abc', {
url: '/abc',
views: {
'content': {
template: '<div><h4>ABC</h4></div>'
},
'footer': {
templateUrl: 'newfooter.html'
}
}
检查here
在幕后,为每个视图分配一个遵循
viewname@statename
方案的绝对名称,其中viewname是视图指令中使用的名称,州名是州的绝对名称,例如contact.item。您还可以选择以绝对语法编写视图名称。例如,前面的例子也可以写成:
.state('report',{
views: {
'filters@': { },
'tabledata@': { },
'graph@': { }
}
})