Question

我尝试使用ng-repeat显示导航栏菜单项，并且我同时使用ui router，但输出不是我预期的。

<!--HTML-->
 <body>
 <div ng-app="navApp" ng-controller="navCtrl">
            <a  ng-repeat="item in navItems" ui-sref="{{item.sref}}">{{item.label}}</a>   
  </div>
  <div ng-app="mainApp">
      <div ui-view></div>
  </div>
 </body>

//JS
angular.module('navApp', []).controller('navCtrl', function($scope){
    $scope.navItems = [
        {'sref': 'home', 'label': 'Home'},
        {'sref': 'login', 'label': 'Login'},
        {'sref': 'signup', 'label': 'Signup'},
        {'sref': 'other', 'label': 'Label'}
    ];
});  


var app = angular.module('mainApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
//   $urlRouterProvider.otherwise('/');

   $stateProvider.state('login', {
      url: '/login',
      templateUrl:'login.html',
      controller: function($scope) {
          $scope.message = 'Login Page'                 
      }
   }).state('signup', {
       url: '/signup',
       templateUrl:'signup.html',
       controller: function($scope) {
           $scope.status = 'Signup Page'
       }
   }).state('home', {
       url: '/',
       template:'Home Page'
   }).state('other', {
       url: '/other',
       template:'Other Page'
   });
});

我的输出为：

HomeLoginSignupLabel

此处sref无效href。使用静态导航菜单而不是动态显示然后一切正常。我认为apps正在执行同一个问题。

Answer 1

使用一些navbar，如bootsrap或semantic-ui等。

bootstrap示例：

 <body>
      <div ng-app="navApp" ng-controller="navCtrl">
         <nav class="navbar navbar-inverse">
            <ul class="nav navbar-nav">
                <li ng-repeat="item in navItems"><a ui-sref="{{item.sref}}">{{item.label}}</a></li>
            </ul>
          </nav>
      <div ng-app="mainApp">
         <div ui-view></div>
      </div>
</body>

如何在使用ui路由器时显示导航菜单

1 个答案: