Question

我正在尝试为来自链接

的angularjs支持集成bootstrap-tagsinput插件

http://timschlechter.github.io/bootstrap-tagsinput/examples/

但是，当我在添加bootsrap-taginput.css和bootsrap-taginput.js以及bootsrap-taginput-angular.css后将其添加到我的HTML文件中时。

bootsrap标记未标识为HTML标记，因此它不会在我的页面上呈现。我可以知道这可能是什么问题吗？它纯粹是基础知识，但由于我不是UI人，因此我不太了解不同版本的一致性。如果有人可以告诉我这是什么问题，因为我觉得至少应该渲染bootsrap-tagsinput标签，而不是！

<bootstrap-tagsinput
ng-model="cities"
typeahead-source="queryCities"
tagclass="getTagClass"
itemvalue="value"
 itemtext="text">

TIA

Answer 1

尝试添加结束标记，如下所示：

    <bootstrap-tagsinput
      ng-model="cities"
      typeahead-source="queryCities"
      tagclass="getTagClass"
      itemvalue="value"
      itemtext="text"></<bootstrap-tagsinput>

Answer 2

对于那些寻找bootstrap-tagsinput的简单指令实现的人，我实现了非常简单的指令：

'use strict';

angular.module('yourApp')
.directive('tagsInputEditor', function () {
    return {
        restrict: 'E',
        scope: {
            options: '@', //receive all the options in a JSON array - one-way binding
            selection: '='//two-way binding - the selected tags to use
        },
        replace: true,
        template: '<input id="inputCategories" type="text" data-role="tagsinput"/>',
        link: function (scope, element, attrs) {

            var el = $(element);
            var options = JSON.parse(scope.options);

            //select initial values for typeahead:
            el.val(function () {
                return cat.allCategories.map(function (category) {
                    return category.Tag;//the object used has a Tag property
                });
            });

            //configuration of typeahead options    
            el.tagsinput({
                typeahead: {
                    source: options.map(function (option) {
                        return option.Tag;
                    })
                },
                freeInput: true
            });

            //event handlers to sync data
            el.on('itemAdded', syncItems);
            el.on('itemRemoved', syncItems);

            function syncItems() {
                var items = el.val().split(',');

                //clear all items and store the new items selection
                scope.selection.length = 0;
                for (var i = 0; i < items.length; i++) {
                    scope.selection.push(items[i]);
                }

                //you should tell angular to refresh the scope and send data back to the scope    
                scope.$apply();
            }
        }
    };
});

用法如下：

<tags-input-editor options="{{model.categories}}" selection="model.selectedCategories" />

您可以看到，控制器使用类别和选定的类别定义模型。这对我来说已经足够了。我没有使用组件的其他功能，但从这里开始很容易 - 我在指令中使用传统的jQuery代码，组件的文档似乎已经足够了。

使用bootstrap-tagsinput api angularjs支持时出现问题

2 个答案: