ng-click 无法识别 $index

Question

{{tab}} 应该会在点击 <a ng-click> 时发生变化，但它不会改变 $index 中的 tab 值

(function() {
  // Angular
  var app = angular.module('app', []);
  app.controller('testimonialController', function() {
    this.role = [{
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Front End Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }];
  });
})();

.position {
  position: relative;
}
.circle {
  width: 25px;
  height: 25px;
  display: block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 10px;
  font-size: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="tab = 5">
  <p><strong>Status : {{tab}}</strong></p>
  <hr>
  <section class="timeline" ng-controller="testimonialController as testimonialList">
    <div class="position" ng-repeat="role in testimonialList.role">
      <div class="date">Role index {{$index}}</div>
      <a href class="circle" ng-click="tab = {{$index}}">+</a>
      <div class="position-description">
        <h2 class="position-title">{{role.position}}</h2>
        <h4 class="company">{{role.company}}</h4>
        <h5 class="location">{{role.location}}</h5>
        <div class="responsibilities">
          <p>{{role.description}}</p>
        </div>
      </div>
      <hr>
    </div>
  </section>
</div>

Answer 1

不要直接在作用域上声明原始类型，因为它们可以被子作用域覆盖。欲了解更多信息：What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

(function() {
  // Angular
  var app = angular.module('app', []);
  app.controller('testimonialController', function() {
    this.model = { };
    this.role = [{
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Front End Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }];
  });
})();

.position {
  position: relative;
}
.circle {
  width: 25px;
  height: 25px;
  display: block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 10px;
  font-size: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-init="model.tab = 5">
  <p><strong>Status : {{model.tab}}</strong></p>
  <hr>
  <section class="timeline" ng-controller="testimonialController as testimonialList">
    <div class="position" ng-repeat="role in testimonialList.role">
      <div class="date">Role index {{$index}}</div>
      <a href class="circle" ng-click="model.tab = $index">+</a>
      <div class="position-description">
        <h2 class="position-title">{{role.position}}</h2>
        <h4 class="company">{{role.company}}</h4>
        <h5 class="location">{{role.location}}</h5>
        <div class="responsibilities">
          <p>{{role.description}}</p>
        </div>
      </div>
      <hr>
    </div>
  </section>
</div>

Answer 2

在您的代码示例中，您在 ng-app 之后声明了 tab 变量。 ng-controller 使子作用域在ng-controller 元素内部tab 实际上是$parent.tab，ng-repeat 使另一个子作用域（又称隔离）作用域，因此如果您将代码中的tab 更改为$parent.$parent.tab，您实际上可以访问它。 更好的做法是只移动在ng-controller 内显示活动选项卡的元素并将其附加到控制器本身。正如您在我的代码示例中看到的那样。

(function() {
  // Angular
  var app = angular.module('app', []);
  app.controller('testimonialController', function() {
    this.role = [{
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Front End Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }, {
      'temeperiod': 'Sep 2009 -<br> Sep 2010',
      'position': 'Web Developer',
      'company': 'Company',
      'location': 'London, United Kingdom',
      'description': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor cididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,proident, sunt in culpa qui'
    }];
  });
})();

.position {
  position: relative;
}
.circle {
  width: 25px;
  height: 25px;
  display: block;
  color: #fff;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 10px;
  font-size: 20px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <section class="timeline" ng-controller="testimonialController as testimonialList">
    <p><strong ng-init="testimonialList.tab = 5" >Status : {{testimonialList.tab}}</strong></p>
    <hr>
    <div class="position" ng-repeat="role in testimonialList.role track by $index">
      <div class="date">Role index {{$index}}</div>
      <a href class="circle" ng-click="testimonialList.tab = $index">+</a>
      <div class="position-description">
        <h2 class="position-title">{{role.position}}</h2>
        <h4 class="company">{{role.company}}</h4>
        <h5 class="location">{{role.location}}</h5>
        <div class="responsibilities">
          <p>{{role.description}}</p>
        </div>
      </div>
      <hr>
    </div>
  </section>
</div>

我希望这会有所帮助。问候。