javascript - 如何从指令中查找并删除 DOM 元素？

Question

我想制作自己的标签管理器。我使用 bootstrap typeahead 并向此元素添加指令并监听选择操作的广播。

我找不到删除之前添加的标签元素的方法。我不能做两件事:传递我的 suctom id 并查找并删除此 DOm 元素，即使 id 已知。

你能帮忙吗？

mainApp.directive("tagsManager", ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function( scope, element, attrs ) {
            console.log("Tags in directive: " + scope.tags);
            scope.$on('tags.new', function(event, tag) {
                console.log("New tag is arrived: " + tag.name);
                var templ = "<div class=\"btn btn-default\" ng-click=\"tagClick($event)\" id=\"tag.name\">tag.name</div>"
                    .replace(/tag.name/, tag.name).replace(/tag.name/, tag.name);
                var el = angular.element(templ);
                el.attr("bind-data", tag);
//                $scope.items = teamSharedObj.teams;
                $compile(el)(scope);
                element.after(el);
            });
            scope.tagClick = function (tag) {
                console.log("Tag: " + tag);
                // TODO find a way to get id of this element and rempve it
            }
        }
    }
}])

Answer 1

我会删除您开始的指令，因为它可以轻松地用 ng-repeat 和更简单的代码替换。

在 Controller 中:

$scope.tags=[];
$scope.typeAheadOnSelect = function( tag){
    /* perhaps do an ajax update to server here? */
    $scope.tags.push(tag);     
}
/* example of removing from array */
$scope.deleteTag=function(tag){
   /*server update by ajax, then */
   $scope.tags.splice( $scope.tags.indexOf(tag), 1);
}

在标记中:

<div ng-repeat="tag in tags" ng-click="deleteTag(tag)" id="tag.name">{{tag.name}}</div>

请注意，唯一进行的修改是对数据模型的修改，Angular 将在内部处理添加/删除 DOM 元素。