具有隔离范围的angular.js指令

Question

我知道关于这个话题已经有很多问题，但我不能让我的例子有用。

请参阅plnkr.co#ua32dkF7fz6X2fA0ZAw3上的示例。

每个预告片都有一些额外的信息，当用户点击其中一个预告片时，这些信息会出现。但是，只要我点击其中一个预告片，其他信息就会出现在每个预告片下方。我想只在我点击的一个预告片下面显示它们。

我很确定这种情况正在发生，因为指令共享相同的父范围。如何将isActive变量保密到每个预告片？

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/

Answer 2

这应该这样做：http://plnkr.co/edit/EfB3n14Hwk5uijsrp1aR

我所做的是为指令创建一个新范围，并将活动变量移动到指令范围。