Ich bin neu in AngularJS und arbeite derzeit an einem Eingabefeld, das mehrere Tags gleichzeitig akzeptieren kann, sowie an der Funktion zur automatischen Vervollständigung, mit der die verfügbaren Tags als Dropdown-Optionen angezeigt werden. Hierfür benutze ich dasngTagsInput Direktive, die ich im Web gefunden habe http: //mbenford.github.io/ngTagsInput), das mir ein benutzerdefiniertes HTML-Element gibt<tags-input>. Das funktioniert wunderbar:

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" }
]

Wie auch immer ich das Standard-HTML verwenden wollte<input> Element anstelle des benutzerdefinierten<tags-input> -Element, das mit der Direktive mitgeliefert wird, also mit viel Hilfe und<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> Ich konnte es hier machen:

Hier ist das neueindex.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>

Und das neuetags.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" }
]

ie Sie feststellen können, die neue RichtlinietagsInputAttr, das das @ umschlie<tags-input> bietet die gleiche Funktionalität und kann innerhalb von @ verwendet werd<input> tag als Attribut zusammen mit den restlichen Attributen wieng-model, display-property etc. Also muss ich das @ nicht benutz<tags-input> element direkt. DasProble Ist das das<auto-complete> innerhalb des @ platzie<input> tag funktioniert nicht.

Dafür muss ich meine Direktive unter Berücksichtigung der folgenden Punkte ändern:

Hinweis Ich möchte jquery nicht für dieses @ verwend

Meine Frage ist, wie ich das @ wick<auto-complete> innerhalb des gleichen<input tags-input-attr> Element

Entweder als Attribut innerhalb desselben<input tags-input-attr> Elemen

oder als Attribut in einem Standard-HTML-Element wie<div> oder<span>, eingewickelt in dasselbe<input tags-input-attr> Element

Wenn nicht die beiden oben genannten, dann als letzter Ausweg, als<auto-complete> tag in dasselbe @ gewicke<input tags-input-attr> Elemen

Alle Hilfe wird geschätzt. Danke im Voraus