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

我所做的是創建指令一個新的範圍，以及移動的主動變的指令範圍。