AngularJs多次调用同一指令导致问题

Question

我很难获得一个简单的指令。我有一个指令，当我点击它时会更改按钮颜色，当我再次点击它时将其设置回原始颜色。

基本上它是一个标记按钮，当你完成标记时，它会让你标记一些东西并改变它的颜色。

为了改变颜色，我使用了ng-class，只要设置了范围变量，它就会设置一个活动类。当我使用该指令一次时它工作正常，当我使用多个实例时，它开始导致问题。

这是代码。

app.directive('myNeeds',function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: 'templates/needs.html',
        // text binding
        scope: {
            needkey: '@needKey',
            needvalue: '@needValue',
            needcity: '@needCity'
        },
        link: function(scope,element,attrs) {
            scope.isNeed = false;
            element.bind('click',function() {
                scope.isNeed = !scope.isNeed;
            });
        }
    }
});

<span class="star">
    <i class="dse-sprite ico-blue-star hand" ng-class="{active:isNeed}"></i>
</span>

现在假设我在一个页面上调用了这个指令两次，无论我点击了哪个按钮，它都会将活动类添加到页面上的最新或最后一个按钮。