如何在嵌套的 Angular UI 路由器中使用 ui-sref？答案

【问题标题】：How to use ui-sref in nested Angular UI router?如何在嵌套的 Angular UI 路由器中使用 ui-sref？
【发布时间】：2017-01-26 08:29:49
【问题描述】：

研究和应用这些技术需要花费大量时间，但我无法解决问题。我的应用程序具有三个顶级导航，分别是家庭、体育和国家。

<head>
<script src="js/angular-ui-router.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/index.js"></script>
</head>

导航看起来像：
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>

在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>

角度看起来像

$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'      
});

基本上，当用户打开应用程序时，顶部应该有 Home、Sports 和 Country 的菜单栏。当用户点击“运动”时，该页面中应该会显示另一个视图/另一个子导航，显示足球、举重和游泳。但是，这些子导航不可点击且无法正常工作。

如果您能帮我找出问题所在，我们将不胜感激。

【问题讨论】：

你试过了吗--> ui-sref=".football"
您有任何控制台错误吗？
我相信你需要在路径后面加上)，所以应该是.state('home', { url: '/', templateUrl: 'index.html' }).state('foo'...
@salihşenolçakarcı，是的，我确实尝试过这样做，但它也没有那样工作。
@MannfromReno，对不起，我在提问的时候忘了说。但是现在我已经更新了问题。

标签： javascript angularjs nested ui-sref

【解决方案1】：

这是嵌套视图的问题。如果您明确针对不同的视图，您可以解决它。

<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 -->

在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 -->

所以在你的 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'
         }
      } 
   });

如果您想了解更多详细信息，可以阅读此文档：https://github.com/angular-ui/ui-router/wiki/Multiple-Named-views

【讨论】：

这似乎是一个不错的策略。所以，在第一个中，我应该做
和第二个三个视图，
,
和
如果你想命名每个视图，你必须在 $stateProvider 配置中添加更多参数。我的解决方案可以让您避免这种情况。我以游泳状态为例。状态 sports.swimming 被明确视为状态 sports 的子状态。所以，在第一个<ui-view>，sports.html（父状态）被插入，而在第二个<ui-view>，sports/swimming.html（子状态） ) 已插入。
好的。我会试一试。谢谢。
我仍然遇到链接无法点击的问题。
啊这可能是由于另一个问题。有演示吗？

【解决方案2】：

您的代码没有问题。可能您可能缺少一些依赖项。看看我的 plunker。click here to view code demo

app.js

(function(){

    angular
  .module('plunker', ['ui.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'      
          });

      }])


    })();

【讨论】：

为什么顶部有两个角度配置？它有什么作用？ .module('plunker', ['ui.router']);角度 .module('plunker') .config(['$stateProvider', function($stateProvider)
@JohnSmith：对不起……我的错。考虑使用 IIFE 将应用程序 js 从路由中分离出来。但忘记了。现在我也更新了我的答案和 plunker 代码。干杯
谢谢。我去看看。

【解决方案3】：

<li><a ng-click="goTo('sports.football')">Football</a></li>

在你的控制器中

$scope.goTo = function(path){
 $state.go(path)
}

【讨论】：

如果您使用的是ui-router，则不需要在控制器中实现ng-click 和函数。
是的，你是对的，但为了解决这个问题，我提出了不同的方法
@MannfromReno，是的，如果我可以在没有 ng-click 和控制器的情况下做到这一点，那将很容易。如果我可以在 html 部分的 .state 部分中扭曲一些东西，那就太好了。