quangpham · December 10, 2013 18:26
diff --git a/jquery.tokeninput.js-with-angular.js.html b/jquery.tokeninput.js-with-angular.js.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>jquery.tokeninput.js with angular.js</title>

    <link rel="stylesheet" type="text/css" href="components/jquery-tokeninput/styles/token-input.css"/>
    <link rel="stylesheet" type="text/css" href="components/jquery-tokeninput/styles/token-input-facebook.css"/>

    <script type="text/javascript" src="components/jquery/jquery.js"></script>
    <script type="text/javascript" src="components/jquery-tokeninput/src/jquery.tokeninput.js"></script>
    <script type="text/javascript" src="components/angular/angular.js"></script>
 </head>
 <body>

 // 試す時の依存関係解決用スクリプト <br>
 // bower install https://github.com/loopj/jquery-tokeninput.git jquery angular <br>
 <hr>

 <div>
    Angular.js抜き<br>
    <input type="text" id="input1">

    <script type="text/javascript">
        var sugestList = [
            {
                id: "a",
                name: "hoge"
            }
        ];
        $("#input1").tokenInput(sugestList, {
            theme: "facebook",
            tokenLimit: 1,
            hintText: "検索語句を入力してください",
            noResultsText: "なんもない",
            searchingText: "けんさくちゅー"
        });
    </script>
 </div>

 <hr>

 <div ng-app="myApp" ng-controller="TestController">
    Angular.js入り<br>

    <div token-input ng-model="datas" input-suggest="suggestList"></div>
    <ul>
        <li ng-repeat="data in datas">
            {{data.id}} - {{data.name}}
        </li>
    </ul>
    <button ng-click="add()">. 増やす</button>

    <script type="text/javascript">
        window.TestController = function ($scope) {
            $scope.suggestList = [
                {
                    id: "a",
                    name: "hoge"
                },
                {
                    id: "b",
                    name: "fuga"
                }
            ];
            $scope.id = 1;
            $scope.add = function () {
                $scope.suggestList.push({
                    id: $scope.id++,
                    name: "" + Math.random()
                });
            };
        };

        angular.module('myApp', ['myApp.directives']);
        angular.module('tokenInput.config', []).value('tokenInput.config', {});

        angular.module('myApp.directives', ['tokenInput.config'])
                .directive('tokenInput', ['tokenInput.config', '$parse', function (config, $parse) {
                    return {
                        restrict: 'A',
                        require: ['?ngModel'],
                        replace: true,
                        template: '<input type="text"/>',
                        link: function (scope, element, attrs) {

                            var options = {
                                theme: "facebook",
                                tokenLimit: 3,
                                hintText: "検索語句を入力してください",
                                noResultsText: "該当がありません",
                                searchingText: "検索中です"
                            };
                            if (config) {
                                angular.extend(options, config);
                            }

                            var reflect = function (results) {
                                if (attrs.ngModel) {
                                    scope.$apply(function () {
                                        scope[attrs.ngModel] = element.tokenInput("get");
                                    });
                                }
                            };
                            options.onAdd = reflect;
                            options.onDelete = reflect;

                            scope.$watch(attrs.inputSuggest, function (newVal) {
                                var getter = $parse(attrs.inputSuggest);
                                var suggestList = getter(scope);

                                element.tokenInput(suggestList, options);
                            });
                        }
                    };
                }]);
    </script>
 </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>jquery.tokeninput.js with angular.js</title>

	<link rel="stylesheet" type="text/css" href="components/jquery-tokeninput/styles/token-input.css"/>
	<link rel="stylesheet" type="text/css" href="components/jquery-tokeninput/styles/token-input-facebook.css"/>

	<script type="text/javascript" src="components/jquery/jquery.js"></script>
	<script type="text/javascript" src="components/jquery-tokeninput/src/jquery.tokeninput.js"></script>
	<script type="text/javascript" src="components/angular/angular.js"></script>
	</head>
	<body>

	// 試す時の依存関係解決用スクリプト <br>
	// bower install https://github.com/loopj/jquery-tokeninput.git jquery angular <br>
	<hr>

	<div>
	Angular.js抜き<br>
	<input type="text" id="input1">

	<script type="text/javascript">
	var sugestList = [
	{
	id: "a",
	name: "hoge"
	}
	];
	$("#input1").tokenInput(sugestList, {
	theme: "facebook",
	tokenLimit: 1,
	hintText: "検索語句を入力してください",
	noResultsText: "なんもない",
	searchingText: "けんさくちゅー"
	});
	</script>
	</div>

	<hr>

	<div ng-app="myApp" ng-controller="TestController">
	Angular.js入り<br>

	<div token-input ng-model="datas" input-suggest="suggestList"></div>
	<ul>
	<li ng-repeat="data in datas">
	{{data.id}} - {{data.name}}
	</li>
	</ul>
	<button ng-click="add()">. 増やす</button>

	<script type="text/javascript">
	window.TestController = function ($scope) {
	$scope.suggestList = [
	{
	id: "a",
	name: "hoge"
	},
	{
	id: "b",
	name: "fuga"
	}
	];
	$scope.id = 1;
	$scope.add = function () {
	$scope.suggestList.push({
	id: $scope.id++,
	name: "" + Math.random()
	});
	};
	};

	angular.module('myApp', ['myApp.directives']);
	angular.module('tokenInput.config', []).value('tokenInput.config', {});

	angular.module('myApp.directives', ['tokenInput.config'])
	.directive('tokenInput', ['tokenInput.config', '$parse', function (config, $parse) {
	return {
	restrict: 'A',
	require: ['?ngModel'],
	replace: true,
	template: '<input type="text"/>',
	link: function (scope, element, attrs) {

	var options = {
	theme: "facebook",
	tokenLimit: 3,
	hintText: "検索語句を入力してください",
	noResultsText: "該当がありません",
	searchingText: "検索中です"
	};
	if (config) {
	angular.extend(options, config);
	}

	var reflect = function (results) {
	if (attrs.ngModel) {
	scope.$apply(function () {
	scope[attrs.ngModel] = element.tokenInput("get");
	});
	}
	};
	options.onAdd = reflect;
	options.onDelete = reflect;

	scope.$watch(attrs.inputSuggest, function (newVal) {
	var getter = $parse(attrs.inputSuggest);
	var suggestList = getter(scope);

	element.tokenInput(suggestList, options);
	});
	}
	};
	}]);
	</script>
	</div>

	</body>
	</html>