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

Question

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

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

Angular 长得像

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

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

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

Answer 1

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

在你的控制器中

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

Answer 2

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

<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

Answer 3

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

app.js

(function(){

    angular
  .module('plunker', ['ui.router']);

  })();

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

      }])


    })();

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

How to use ui-sref in nested Angular UI router?

javascript

nested

angularjs

ui-sref