javascript - 具有隔离作用域的 angular.js 指令

Question

我知道已经有很多关于这个主题的问题，但我无法让我的示例起作用。

请参阅 plnkr.co#ua32dkF7fz6X2fA0ZAw3 中的示例.

每个预告片都有一些附加信息，当用户点击其中一个预告片时，这些信息应该会出现。然而，一旦我点击其中一个预告片，附加信息就会出现在每个预告片下方。我只想在我单击的一个预告片下方显示它们。

我很确定这会发生，因为这些指令共享相同的父范围。如何让 isActive 变量对每个预告片都是私有(private)的？

Answer 1

我会这样做:

1) html 更改:

<teaser ng-repeat="teaser in teasers" teaser="teaser"></teaser>

2) 修改指令:

restrict: 'E',
replace: true,
scope: {
  teaser: '='
},
controller: function ($scope) {
  $scope.isActive = false;
  $scope.select = function(teaser) {
    $scope.isActive = !$scope.isActive;
  };
}

演示:http://jsbin.com/aqehew/1/