也是在使用bootstrap-tagsinput插件的时候遇到的问题，网上很多的教程都是给插件写一个directive。

其实，可以直接使用jquery插件，我用bootstrap-tagsinput插件使用举例。

首先，在项目中引用插件代码

不要忘记引用jquery，bootstrap-tagsinput依赖jquery。

1
2
<link rel="stylesheet" href="xxx/bootstrap-tagsinput.css">
<script src="xxx/bootstrap-tagsinput.js"></script>

第二步：在代码中使用 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
angular.module('app.naturePlus').controller('NaturePlusAddCtrl', NaturePlusAddCtrl);
//注入依赖
NaturePlusAddCtrl.$inject =['$scope','$compile'];
//Controller
function NaturePlusAddCtrl($scope,$compile){
    var str = $('<input type="text" />');
    var resoures = [ "Amsterdam","Los Angeles",  "Kinshasa"];
    //调用插件
    str.tagsinput({
        typeaheadjs: {
            source: function (query, sync) {
                var arr = [];
                //循环数据
                for (var i in resoures) {
                    if (resoures[i].indexOf(query) > -1) {
                        arr.push(resoures[i]);
                    }
                }
                sync(arr);
            }
        }
    });
    //插入到dom节点中
    $('body').append($compile(str)($scope));
}

这样就可以工作了，但是取值的话也要使用jquery的方式。