Question

我想制作自己的标签maanger。我使用bootstrap typeahead并将指令添加到此元素并在select操作上侦听广播。

我找不到删除之前添加的标记元素的方法。我不能做两件事：传递我的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替换，而且代码更简单。

在控制器中：

$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元素。

如何从指令中查找和删除DOM元素？

1 个答案: