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

我知道有关此主题的问题已经很多，但我无法使示例工作。

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

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

我很确定这是因为指令共享相同的父作用域。如何保持每个预告片私有(private)的isActive变量？

最佳答案

我会这样:

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/

关于javascript - 具有隔离范围的angular.js指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14855095/