angularJS文本标记

我想创建一个类似“标签”的操作系统,方便处理包含随机内容的各种标签。我选择了使用angular ui警报机制,所以我对其进行了一些整理,得到了如下内容:

一 工厂 :

app.factory(
        'ObjectTag',
        function () {

            function ObjectTag() {
                this.tags = [];
            }

            ObjectTag.prototype = {
                hasTags: function () {
                    return( this.tags.length != 0);
                },
                addTag: function (msgText, objectId) {
                    this.tags.push({type: 'info', msg: msgText, encapsulatedId: objectId});
                },
                closeTag: function(index){
                    this.tags.splice(index, 1);
                },
                getTags: function () {
                    return this.tags;
                }
            };

            return (ObjectTag);
        });

和一个 指令 :

app.directive('objectTag', function () {
        return {
            restrict: 'E',
            require: '^objectTags',
            template: "<div ng-if='objectTags.hasTags()'><alert ng-repeat='tag in objectTags.getTags()' type='{{ tag.type }}' close='objectTags.closeTag($index)'>{{ tag.msg }}</alert></div>"
        }
    });

我这样使用:

<object-tag object-tags="objectTags"></object-tag>

还有我的 控制器 :

$scope.objectTags = new ObjectTag();

我希望能够轻松添加和删除标签。 我的问题是,它们看起来不像我希望的那样,我希望每个标签都浮动到另一个标签的右侧,并且其大小刚好足以容纳文本 就像这里的标签一样 ,而每个警报标记显示在不同的行上。