Настройка директив ngTagsInput и autoComplete (AngularJS)
Я новичок в 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>
элемент:
Либо как атрибут внутри того же<input tags-input-attr>
элемент
или как атрибут внутри стандартного элемента HTML, такого как<div>
или же<span>
, завернутый в то же<input tags-input-attr>
элемент.
Если не выше двух, то в крайнем случае, как<auto-complete>
тег, завернутый в то же<input tags-input-attr>
элемент
Вся помощь приветствуется. Заранее спасибо.