Question

我有一个单页应用网站，我希望菜单选项卡在选择页面时将类更改为活动状态。在我的home.html模板中，我有一个<a>标记链接到我的历史记录页面。单击此链接时，历史记录菜单项应具有活动类。它在我第一次加载网站时起作用，但如果用户在历史页面和主页上来回移动，它将无法工作。任何想法？
注意，菜单和主页内容都是我使用ng-include和ui-view（通过ui-router）加载的模板。
索引页：

<body onresize="setWidth()" ng-app="app" ng-controller="changeTab">

<div data-role="page" >

 <!--include the menuTemplate set the current index to appropriate value-->
 <div ng-include="'templates/menuTemplate.html'"></div>

</div>
 <div data-role="main" class="ui-content">
  <div ui-view></div>
 </div>
</body>

menuTemplate.html：

<nav class="navbar navbar-default" id="desktopNav">
  <div class="container-fluid">
    <div class="topNav">
      <ul class="nav navbar-nav">
       <li ng-click="setIndex(0)" ng-class="(index==0)? 'active':''"><a id="homeButton" ui-sref="home">Home</a></li>
       <li ng-click="setIndex(1)" ng-class="(index==1)? 'active':''"><a ui-sref="history">History</a></li>
       <li ng-click="setIndex(2)" ng-class="(index==2)? 'active':''"><a ui-sref="ensembles">Ensembles</a></li>
       <li ng-click="setIndex(3)" ng-class="(index==3)? 'active':''"><a ui-sref="staffs">Staffs</a></li>
       <li ng-click="setIndex(4)" ng-class="(index==4)? 'active':''"><a ui-sref="career">Career</a></li>
       <li ng-click="setIndex(5)" ng-class="(index==5)? 'active':''"><a ui-sref="contact">Contact</a></li>
     </ul>
   </div>
 </div>
</nav>

home.html（VIEW）模板：

<p><a href="history" ng-click="setIndex(1)">Learn more...</a></p>

Angular JS：

angular.module('app').controller('changeTab',['$scope', function($scope){
  $scope.index;

  $scope.setIndex = function(val){
    $scope.index=val;
  }

  $scope.getIndex = function(val){
    return $scope.index;
  }
}]);

Answer 1

ui-sref-active可以免除ng-click和ng-class的麻烦：

<nav class="navbar navbar-default" id="desktopNav">
  <div class="container-fluid">
    <div class="topNav">
      <ul class="nav navbar-nav">
       <li ui-sref-active="active"><a id="homeButton" ui-sref="home">Home</a></li>
       <li ui-sref-active="active"><a ui-sref="history">History</a></li>
       <li ui-sref-active="active"><a ui-sref="ensembles">Ensembles</a></li>
       <li ui-sref-active="active"><a ui-sref="staffs">Staffs</a></li>
       <li ui-sref-active="active"><a ui-sref="career">Career</a></li>
       <li ui-sref-active="active"><a ui-sref="contact">Contact</a></li>
     </ul>
   </div>
 </div>
</nav>

Answer 2

您必须为导航模板和页面模板创建单独的控制器，其他明智的主控制器始终重置$ scope.index值

Answer 3

从@ Danial的回答中尝试ui-sref-active，就像魅力一样：）

web.xml

angular.module('demo', ['ui.router']);
angular.module('demo')
  .config(function($stateProvider, $urlRouterProvider) {
    // default state
    $urlRouterProvider.otherwise("/home");
    $stateProvider
      .state('home', {
        url: "/home",
        template: "<h3>This is home.</h3>"
      })
      .state('career', {
        url: "/career",
        template: "<h3>Career.</h3>"
      })
      .state('contact', {
        url: "/contact",
        template: "<h3>Contact.</h3>"
      });
  })
  .controller('MenuCtrl', ['$log',
    function($log) {

      $log.debug('MenuCtrl activated');
    }
  ]);

.nav {
  margin: 0;
  padding: 0;
}
.nav li {
  display: inline-block;
  padding: 5px
}
.active {
  background-color: #aaa;
}

ng-click in template只能工作一次，但在返回页面后停止工作

3 个答案: