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

Question

我正在尝试从下面的链接集成bootstrap-tagsinput插件来支持angularjs

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

但是，当我在添加bootstrap -taginput.css和bootstrap -taginput.js和bootstrap -taginput-angular.css之后将这个添加到我的HTML文件时。

bootstrap标签不被识别为HTML标签，因此它不会在我的页面上呈现。我能知道这有什么问题吗?这是纯粹的基础，但因为我不是一个UI家伙，我对版本之间的一致性知之甚少。如果有人能告诉我是什么问题，因为我觉得至少bootstrap -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代码，组件的文档似乎足够了。