ng-click无法识别$ index

Question

点击<a ng-click>时，

{{tab}} 会发生变化，但不会改变$index 标签值>

＆＃13;

＆＃13;

(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'
    }];
  });
})();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

在您的代码示例中，您在tab之后立即声明了ng-app变量。 ng-controller生成子范围，因此ng-controller元素tab内部实际为$parent.tab，ng-repeat生成另一个子（也称为隔离）范围，因此如果您更改{{1}在代码tab中你可以实际访问它。 更好的做法是只移动显示$parent.$parent.tab内活动标签的元素，并将其附加到控制器本身。正如您在我的代码示例中所看到的那样。

＆＃13;

＆＃13;

ng-controller

＆＃13;

(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'
    }];
  });
})();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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