ng-click in template 只工作一次，返回页面后停止工作答案

【问题标题】：ng-click in template only work once, but stop working after going back to the pageng-click in template 只工作一次，返回页面后停止工作
【发布时间】：2016-03-01 07:15:14
【问题描述】：

我有一个单页应用程序网站，我希望菜单选项卡在选择页面时将类更改为活动。在我的 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;
  }
}]);

【问题讨论】：

父控制器的作用域值更新了吗？

标签： javascript angularjs single-page-application angularjs-ng-click

【解决方案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>

【讨论】：

【解决方案2】：

您必须为导航模板和页面模板创建单独的控制器，否则主控制器总是重置 $scope.index 值

【讨论】：

【解决方案3】：

只需从@Danial 的回答中尝试 ui-sref-active，就像魅力一样工作 :)

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<div ng-app="demo" ng-controller="MenuCtrl as menu">
  <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 ui-sref="home">Home</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>
  <div ui-view></div>
</div>

【讨论】：