多标签输入字段

Question

我最近开始使用 AngularJS，目前正在开发一个带有标签输入字段和提交按钮的简单表单。输入字段应该接受多个标签，以便在单击提交时所有标签都保存为数组。

现在我正在使用我在 github(http://mbenford.github.io/ngTagsInput/) 上找到的 ngTagsInput 指令。这个指令给了我<tags-input></tags-input> HTML 元素，它创建了一个输入字段，在提交之前接受多个标签。这是它的样子（查看 Tags 字段）：

这很好用，我现在需要的是一个指令，它给我类似的功能，但不是一个元素，即。 <tags-input>，我想要一个可以包含在常规 <input> 元素中的属性，例如 <input attribute='tags-input'>。

问题：

1. 有没有办法可以使用 ngTagsInput 作为属性？
2. 是否有任何其他指令可以满足我的需要？如果是，请在答案中发布链接。

提前致谢。

Answer 1

没有。正如您在tags-input.js 文件中看到的，该指令被配置为element：

return {
    restrict: 'E',
    require: 'ngModel',
    scope: {
        tags: '=ngModel',
        text: '=?',
        templateScope: '=?',
        tagClass: '&',
        onTagAdding: '&',
        onTagAdded: '&',
        onInvalidTag: '&',
        onTagRemoving: '&',
        onTagRemoved: '&',
        onTagClicked: '&',
    },

但是您可以使用attribute 类型编写自己的指令，并将您的div element“替换”为tags-input element。

我写了这个例子：

app.directive('tagsInputAttr', 
  function($compile){
    return {
      restrict: 'A',
      require: '?ngModel',
      scope:{
        ngModel: '='
      },
      link: function($scope, element, attrs, controller) {
        var attrsText = '';
        $.each($(element)[0].attributes, function(idx, attr) {
          if (attr.nodeName === "tags-input-attr" || attr.nodeName === "ng-model") 
            return;

          attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";
        });

        var html ='<tags-input ng-model="ngModel" ' + attrsText + '></tags-input>';
        e =$compile(html)($scope);
        $(element).replaceWith(e);
      }
    };
  }
);

现在您可以通过两种方式配置标签输入元素：

元素方式：

<tags-input ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag here..." ></tags-input>

属性方式：

<input tags-input-attr ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag here..."  />

您可以在 Plunker 上看到这一点：

https://plnkr.co/edit/yjkX22