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

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