Notice that the view names are now specified as absolute names, as opposed to the relative name. It is targeting the 'filters', 'tabledata', and 'graph' views located in the root unnamed template. Since it's unnamed, there is nothing following the '@'. The root unnamed template is your index.html.
.state('report',{
views: { 'filters@': { }, 'tabledata@': { }, 'graph@': { }
}
})@后面没有名字，默认index.html（入口页面）就是模板文件
例子如下：http://plnkr.co/edit/ujgXbPJXQ3E13F9aFPBc?p=preview
例子中
.state('route2', {
url: "/route2",
views: {
'route2_1@': {
templateUrl: "route2.html",
controller: function($scope){
alert("bbbb");
}
},
'route2_2@': {
templateUrl: "route2.html",
controller: function($scope){
alert("aaa");
}
}
}
})route2@和route3@的@后面都没有名字，所以默认模板在入口index.html中找对应的ui-view
下面是练手写的一个tab的demo
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div ui-view="main"></div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script>
var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/tab/route1")
$stateProvider
.state('tab', {
url: "/tab",
views: {
'main@':{
templateUrl: "tab.html"
}
}
})
.state('tab.route1', {
url: "/route1",
views: {
'tab@tab':{
templateUrl: "route1.html"
}
}
})
.state('tab.route1.list', {
url: "/list",
views: {
'main@': {
templateUrl: "route1.list.html",
controller:function($scope){
$scope.back=function(){
history.back();
}
}
}
}
})
.state('tab.route1.list2', {
url: "/list2",
views: {
'route1_test@tab.route1': {
template: "停留在route1.html页面",
}
}
})
.state('tab.route1.list3', {
url: "/list3",
views: {
'main@': {
template: "11111",
}
}
})
.state('tab.route2', {
url: "/route2",
views: {
'tab@tab':{
templateUrl: "route2.html"
}
}
})
.state('tab.route3', {
url: "/route3",
views: {
'tab@tab':{
templateUrl: "route3.html"
}
}
})
.state('tab.route3.route3_1', {
url: "/route3_1",
views: {
'route3_tab@tab.route3':{
templateUrl: "route3_1.html"
}
}
})
.state('tab.route3.route3_2', {
url: "/route3_2",
views: {
'route3_tab@tab.route3':{
templateUrl: "route3_2.html"
}
}
})
.state('tab.route3.route3_3', {
url: "/route3_3",
views:{
'route3_tab@tab.route3':{
templateUrl: "route3_3.html"
}
}
})
/*.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})*/
})
</script>
</body>
</html>在线例子在这里
1029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
