angular JS中的Self removable指令

Question

我正在尝试创建允许我附加和销毁可重复元素的应用程序，但我遇到了一个问题。

首先，这是我的追加元素的指令：

myApp.directive("addWatcher", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){
            angular.element(document.getElementById('watchers-space')).append($compile("<Watcher></Watcher>")(scope));
        });
    };
});

它包含这个div-button：

        <div ng-click="remove()">X</div>

当然，这里是watcher指令：

myApp.directive('watcher', function() {
    return {
        controller: function($scope, $element, $attrs, $transclude) {
            $scope.remove = function() {
                $element.remove();
            }
        },
        templateUrl: 'watcherDirective.html'
    };
});

问题是我可以添加许多“观察者”，但我只能删除最后添加的，也是在页面加载时首先创建的。在创建删除每个已创建的"Watcher“元素的机会的实现中，我错过了什么？

Answer 1

感谢@devqon的评论，我用这种方式解决了这个问题：

myApp.directive('watcher', function() {
    return {
        scope: true,
        controller: function($scope, $element, $attrs, $transclude) {
            $scope.remove = function() {
                $element.remove();
                $scope.$destroy();
            }
        },
        templateUrl: 'watcherDirective.html'
    };
});

现在一切都正常了