如何在嵌套的Angular UI路由器中使用ui-sref？
[英]How to use ui-sref in nested Angular UI router?
问题描述
Its has been a heavy hours research and applying the techniques however I am not able to solve the issue. 
它是一个繁重的小时研究和应用技术，但我无法解决这个问题。 My app has three top navigations which are home, sports and country. 我的应用程序有三个顶级导航，家庭，体育和国家。
<head>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/index.js"></script>
</head>
The navigation looks like: 导航看起来像：
HTML looks like below which is in index.html HTML看起来如下所示，位于index.html中
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="sports">Sports</a></li>
<li><a ui-sref="country">Country</a></li>
</ul>
<div ui-view></div>
In sports.html, there are other three navigation, which are not working (they are not even clickable). 在sports.html中，还有其他三个导航，它们不起作用（它们甚至不可点击）。
<ul>
<li><a ui-sref="sports.football">Football</a></li>
<li><a ui-sref="sports.weightlifting">Weightlifting</a></li>
<li><a ui-sref="sports.swimming">Swimming</a></li>
</ul>
<div ui-view></div>
Angular looks like 角度看起来像
$stateProvider
.state('home', {
url: '/',
templateUrl: 'index.html'
})
.state('sports', {
url: '/sports',
templateUrl: 'sports.html'
})
.state('country', {
url: '/country',
templateUrl: 'country.html'
})
.state('sports.football', {
url: '/football',
templateUrl: 'sports/football.html'
})
.state('sports.weightlifting', {
url: '/weightlifting',
templateUrl: 'sports/weightlifting.html'
})
.state('sports.swimming', {
url: '/swimming',
templateUrl: 'sports/swimming.html'
});
Basically, when a user opens the app, there should be top menu bar with Home, Sports and Country. 基本上，当用户打开应用程序时，应该有顶部菜单栏，包括Home，Sports和Country。 When a user clicks Sports then there should be another view shown/ another sub navigation in this page showing Football, Weightlifting and Swimming. 当用户点击体育时，此页面中应显示另一个视图/另一个子导航，显示足球，举重和游泳。 However these sub navigations are not clickable and not working. 但是，这些子导航不可点击且无法正常工作。
It would be grateful if you can help me to find what would be the problem. 如果你能帮我找到问题所在，将不胜感激。
3 个解决方案
解决方案1
1 2017-01-24 21:52:58
It's a problem of nested views. 这是嵌套视图的问题。 If you explicitly target the different views you can resolve it. 如果您明确定位了不同的视图，则可以解决它。
<ul>
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="sports">Sports</a></li>
<li><a ui-sref="country">Country</a></li>
</ul>
<div ui-view></div> <!-- your sports.html plugs in here -->
In sports.html : 在sports.html中：
<ul>
<li><a ui-sref="sports.football">Football</a></li>
<li><a ui-sref="sports.weightlifting">Weightlifting</a></li>
<li><a ui-sref="sports.swimming">Swimming</a></li>
</ul>
<div ui-view></div> <!-- your [sportName].html plugs in here -->
So in your app.js, you just have to add some params concerning the nested view in sport.html, like this : 所以在你的app.js中，你只需要在sport.html中添加一些关于嵌套视图的参数，如下所示：
$stateProvider
.state('home', {
url: '/',
templateUrl: 'index.html'
})
.state('sports', {
url: '/sports',
templateUrl: 'sports.html'
})
.state('country', {
url: '/country',
templateUrl: 'country.html'
})
.state('sports.football', {
url: '/football',
// Relatively targets the unnamed view in this state's parent state, 'sports'.
// <div ui-view/> within sports.html
views: {
"": {
templateUrl: 'sports/football.html'
}
}
})
.state('sports.weightlifting', {
url: '/weightlifting',
// Relatively targets the unnamed view in this state's parent state, 'sports'.
// <div ui-view/> within sports.html
views: {
"": {
templateUrl: 'sports/weightlifting.html'
}
}
})
.state('sports.swimming', {
url: '/swimming',
// Relatively targets the unnamed view in this state's parent state, 'sports'.
// <div ui-view/> within sports.html
views: {
"": {
templateUrl: 'sports/swimming.html'
}
}
});
If you want more details, you can read this doc : https://github.com/angular-ui/ui-router/wiki/Multiple-Named-views 如果您想了解更多详细信息，可以阅读以下文档： https ： //github.com/angular-ui/ui-router/wiki/Multiple-Named-views
解决方案2
0 已采纳 2017-01-24 23:16:55
There is no issue in your code. 您的代码中没有问题。 Probably you might be missing some dependencies. 可能你可能会遗漏一些依赖项。 Check out my plunker. 检查我的plunker。 click here to view code demo 点击这里查看代码演示
app.js app.js
(function(){
angular
.module('plunker', ['ui.router']);
})();
router.js router.js
(function(){
'use strict';
angular
.module('plunker')
.config(['$stateProvider', function($stateProvider)
{
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html'
})
.state('sports', {
url: '/sports',
templateUrl: 'sports.html'
})
.state('sports.football', {
url: '/football',
templateUrl: 'football.html'
})
.state('sports.weightlifting', {
url: '/weightlifting',
templateUrl: 'weightlifting.html'
})
.state('sports.swimming', {
url: '/swimming',
templateUrl: 'swimming.html'
})
.state('country', {
url: '/country',
templateUrl: 'country.html'
});
}])
})();
解决方案3
-1 2017-01-24 21:24:51
<li><a ng-click="goTo('sports.football')">Football</a></li>
In Your Controller 在您的控制器中
$scope.goTo = function(path){
$state.go(path)
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.