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

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

如果你能帮助我找到问题，我将不胜感激。

Answer 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

Answer 2

您的代码中没有问题。可能你可能会遗漏一些依赖项。查看我的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'      
          });

      }])


    })();

Answer 3

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

在您的控制器中

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

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

3 个答案: