具有隔离范围的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/