javascript - 多标签输入字段

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