Multiple-tags input field

Question

I recently started with AngularJS, and am currently working on a simple form with a tags input field and a submit button. The input field is supposed to accept multiple tags so that on clicking submit all the tags get saved as an array.

Now I am currently using ngTagsInput directive which I found on github(http://mbenford.github.io/ngTagsInput/). This directive gives me <tags-input></tags-input> HTML element which creates an input field that accepts multiple tags before submission. Here is what it look like(look at the Tags field):

This works fine, what I need now is a directive which gives me similar functionality but instead of an element ie. <tags-input>, I want an attribute which I can include inside the conventional <input> element like <input attribute='tags-input'> .

Question:

1. Is there a way I can use ngTagsInput as an attribute?
2. Are there any other directives out there which may suit my need? If yes then please post the link in the answer.

Thanks in advance.

Answer 1

No. As you can see on tags-input.js file, the directive is configured as an element:

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

But you can write your own directive with attribute type and "replace" your div element to the tags-input element.

I wrote this example:

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);
      }
    };
  }
);

Now you can configure your tags-input elements in two ways:

Element way:

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

Attribute way:

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

You can see this in action at Plunker:

https://plnkr.co/edit/yjkX22