1

研究和应用这些技术是一项繁重的工作，但我无法解决这个问题。我的应用程序具有三个顶级导航，分别是家庭、体育和国家。

<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 的菜单栏。当用户点击“运动”时，该页面中应该会显示另一个视图/另一个子导航，显示足球、举重和游泳。但是，这些子导航不可点击且无法正常工作。

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

4

3 回答 3

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

于 2017-01-24T21:52:58.323 回答
0

您的代码没有问题。可能您可能缺少一些依赖项。看看我的笨蛋。点击这里查看代码演示

应用程序.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'      
          });

      }])


    })();
于 2017-01-24T23:16:55.257 回答
-1 
<li><a ng-click="goTo('sports.football')">Football</a></li>

在你的控制器中

$scope.goTo = function(path){
 $state.go(path)
}
于 2017-01-24T21:24:51.963 回答