我试图通过标签显示2个不同的块。但子视图没有显示，这是我的代码：
我想用它来选择我想要展示的部分。
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list/:id", //the URL will be: route1/list
views:{
'':{
templateUrl: "route1.list.html",
controller: function($scope,$stateParams){
$scope.items = ["I am", "from", "Insperity", "Items"];
// console.log($stateParams.id);
$scope.parentid=$stateParams;
}
},
'money@route1.list':{
templateUrl:'money.html',
controller: function($scope,$stateParams){
console.log($scope.parentid);
}
},
'details@route1.list':{
templateUrl:'detail.html'
}`enter code here`
}
})
Html for route1.list.html :
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<a ui-sref="money">go to money</a>
<a ui-sref="details">go to details</a>
<div ui-view></div>
but if I change my html to this: (it works, but not the way I want)
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<div ui-view='money'></div>
<div ui-view='details'></div>
关于这个问题的任何想法？
答案 0 :(得分：2)
一种方法是制作 money detail 和 list 子状态>国家。有a working plunker
这将调整状态def：
...
.state('route1.list', {
url: "/list/:id", //the URL will be: route1/list
views: {
'@': { // targeting index.html ui-view=""
templateUrl: "route1.list.html",
controller: function($scope, $stateParams) {
$scope.items = ["I am", "from", "Insperity", "Items"];
// console.log($stateParams.id);
$scope.parentid = $stateParams;
}
},
}
})
.state('route1.list.money', {
url: "/money",
template: "<div>this is money</div>",
controller: function($scope, $stateParams) {
console.log($scope.parentid);
}
})
.state('route1.list.detail', {
url: "/detail",
template: "<div>this is a detail</div>"
})
这将调整 route1.list.html
<div>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
<a ui-sref="route1.list.money($stateParams)">go to money</a><br />
<a ui-sref="route1.list.detail($stateParams)">go to details</a>
<div ui-view></div>
</div>