javascript - 自定义 ngTagsInput 和 autoComplete 指令 (AngularJS)

Question

我是 AngularJS 的新手，目前正在开发一个输入字段，该字段可以一次接受多个标签以及自动完成功能，该功能将可用标签显示为下拉选项。为此，我使用 ngTagsInput我在网上找到的指令( http://mbenford.github.io/ngTagsInput/ )，它为我提供了一个自定义 HTML 元素 <tags-input> 。这工作得很漂亮:

index.html :

<script>
var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { text: 'Tag1' },
    { text: 'Tag2' },
    { text: 'Tag3' }
  ];

  $scope.loadTags = function(query) {
    return $http.get('tags.json');
  };
});
</script>
<div ng-app="plunker" ng-controller="MainCtrl">    
    <tags-input ng-model="tags" add-on-paste="true" display-property="text" placeholder="Add a Tag" add-from-autocomplete-only="true">
           <auto-complete max-results-to-show="4" min-length="2" source="loadTags($query)"></auto-complete>
    </tags-input>
</div>

tags.json :

[
  { "text": "Tag1" },
  { "text": "Tag2" },
  { "text": "Tag3" },
  { "text": "Tag4" },
  { "text": "Tag5" },
  { "text": "Tag6" },
  { "text": "Tag7" },
  { "text": "Tag8" },
  { "text": "Tag9" },
  { "text": "Tag10" }
]

但是我想使用标准 HTML <input>元素而不是自定义 <tags-input>指令附带的元素，因此需要大量帮助并使用 <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>我能够在这里做到这一点:

这是新的 index.html :

<script>
var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { "id":1, "tagname": 'Tag1' },
    { "id":2, "tagname": 'Tag2' },
    { "id":3, "tagname": 'Tag3' },
    { "id":4, "tagname": 'Tag4' }
  ];

    $scope.loadTags = function(query) {
    return $http.get('tags.json');
  };

});

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);
      }
    };
  }
);
</script>
<div ng-app="plunker" ng-controller="MainCtrl">

    <input tags-input-attr ng-model="tags" add-on-paste="true" display-property="tagname" placeholder="Add tags here..." add-from-autocomplete-only="true">
      <auto-complete max-results-to-show="3" min-length="2" source="loadTags($query)"></auto-complete>
    </input>

  </div>

还有新的 tags.json :

[
  { "id":1, "tagname": "Tag1" },
  { "id":2, "tagname": "Tag2" },
  { "id":3, "tagname": "Tag3" },
  { "id":4, "tagname": "Tag4" },
  { "id":5, "tagname": "Tag5" },
  { "id":6, "tagname": "Tag6" },
  { "id":7, "tagname": "Tag7" },
  { "id":8, "tagname": "Tag8" },
  { "id":9, "tagname": "Tag9" },
  { "id":10, "tagname": "Tag10" }
]

正如您所注意到的，新指令 tagsInputAttr ，它包含 <tags-input>提供相同的功能，可以在 <input> 内部使用标记作为属性以及其余属性，例如 ng-model , display-property所以我不必使用 <tags-input>直接元素。 问题是<auto-complete>放置在 <input> 内标签不起作用。

为此，我需要更改我的指令，考虑以下因素:

注意:我不想为此使用 jquery

我的问题是如何包装 <auto-complete>里面一样<input tags-input-attr>元素:

1. 作为同一个 <input tags-input-attr> 内的属性元素

2. 或作为标准 HTML 元素内的属性，如 <div>或<span> ，包裹在相同的<input tags-input-attr>内元素。

3. 如果不是以上两个，那么作为最后的手段，如<auto-complete>标签包裹在相同的 <input tags-input-attr> 内元素

感谢所有帮助。提前致谢。

Answer 1

我对之前的指令做了一些更改，现在它接受从 attribute 到 element 指令的所有类型的转换。

您仍然拥有 elem-as-attr 属性，但现在您必须指定它的值，它将成为元素 将替换。

示例:

<div elem-as-attr="tags-input"></div>

您的应用程序 JavaScript:

var app = angular.module('plunker', ['ngTagsInput']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.allTags = [
    { "id":1, "tagname": "Tag1" },
    { "id":2, "tagname": "Tag2" },
    { "id":3, "tagname": "Tag3" },
    { "id":4, "tagname": "Tag4" },
    { "id":5, "tagname": "Tag5" },
    { "id":6, "tagname": "Tag6" },
    { "id":7, "tagname": "Tag7" },
    { "id":8, "tagname": "Tag8" },
    { "id":9, "tagname": "Tag9" },
    { "id":10, "tagname": "Tag10" }
  ];

  $scope.myTags =[
    $scope.allTags[2],
    $scope.allTags[4],
    $scope.allTags[8]
  ];

  $scope.loadTags = function(query) {
    return $scope.allTags;
  };
});

指令代码:

app.directive('elemAsAttr', function($compile) {
  return {
    restrict: 'A',
    require: '?ngModel',
    replace: true,
    scope: true,
    compile: function(tElement, tAttrs) {
      return function($scope) {
        var attrs = tElement[0].attributes;

        var attrsText = '';
        for (var i=0; i < attrs.length; i++) {
          var attr = attrs.item(i);
          if (attr.nodeName === "elem-as-attr") {
            continue;
          }
          attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";        
        }

        var hasModel = $(tElement)[0].hasAttribute("ng-model");
        var innerHtml = $(tElement)[0].innerHTML;
        var html = '<' + tAttrs.elemAsAttr  + attrsText + '>' + innerHtml + '</' + tAttrs.elemAsAttr + '>';

        var e = hasModel ? $compile(html)($scope) : html;
        $(tElement).replaceWith(e);
      };
    }
  }
});

HTML 代码:

元素方式:

  <tags-input ng-model="myTags" add-on-paste="true" display-property="tagname" placeholder="Add a Tag" add-from-autocomplete-only="true">
    <auto-complete max-results-to-show="10" display-property="tagname" min-length="2" source="loadTags($query)"></auto-complete>
  </tags-input>

属性方式:

  <div elem-as-attr="tags-input" ng-model="myTags" add-on-paste="true" display-property="tagname" placeholder="Add tags here..." add-from-autocomplete-only="true">
    <div elem-as-attr="auto-complete" max-results-to-show="10" display-property="tagname" min-length="2" source="loadTags($query)"></div>
  </div>

笨蛋:

https://plnkr.co/edit/9TqsXy

Note that you cannot use the input element for the tagsInput because the input element does not have the closing tag in HTML. So you will not be able to put the auto-complete element inside it.