angularJS文本标签

Question

我想要创建一个类似于“标记”的操作系统，它可以方便地处理包含随机内容的各种标记。我选择了使用角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();

我希望能够轻松地添加和删除标签。我的问题是，它们看起来不像我想让它们看的那样，我希望每个标记在另一个标签的右边浮动，它的大小就足以像这里的标记一样保存文本，相反，每个警报标记都显示在不同的行上。

Answer 1

您可以通过重写引导CSS来解决这个问题。我是display: inline-flex风格的特别粉丝。这是一个示例plnkr。您可以在cs-tics.com的优秀文章中了解更多有关它的内容。

以及相关的HTML/CSS：

<div class="alert alert-success alert-inline" role="alert">Well done!</div>
<div class="alert alert-info alert-inline" role="alert">Heads up!</div>
<div class="alert alert-warning alert-inline" role="alert">Warning!</div>
<div class="alert alert-danger alert-inline" role="alert">Oh snap!</div>

.alert-inline {
  display: inline-flex;
}