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按钮：

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

当然这是守望者指示：

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

问题是我可以添加很多＆＃34; Watchers＆＃34;但我只能删除添加的最后一个，并且首先在页面加载时创建。实施中我缺少什么来创造机会去除每个创建的＆＃34; Watcher＆＃34;元件？

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'
    };
});

现在一切正常

角度JS中的自我可移除指令

1 个答案: