angularjs - tokenInput 作为 angular.js 指令

我正在尝试从 James Smith 的 tokenInput Jquery 插件创建一个 angular.js 指令:http://loopj.com/jquery-tokeninput

这是我到目前为止所拥有的:

antdna = angular.module('Communication', []);

antdna.factory('autoCompleteService', [function() {
    return {
      getSource: function() {
      return [{"id":1, "name":"John Doe"}, {"id":2, "name":"Jane Smith"}];
    }
  }
}]);

antdna.directive('autoComplete', function(autoCompleteService) {
    return {
        restrict: 'A',
        link: function(scope, elem) {
            elem.tokenInput(autoCompleteService.getSource(), {
                crossDomain:false,
                theme: "facebook",
                hintText: "Enter User Name",

                preventDuplicates: true
            });
            }
    };
});

使用以下标记:

<input type="text" name="recipient" ng-model="conversation.recipients" class="messageComposeTextField" auto-complete placeholder="To :" required />

TokenInput 工作完美，但我的问题是我无法绑定(bind)到模型。

{{conversation.recipients}}

是空白。

tokenInput 插件使用列表元素(ul 和 li)生成它自己的标记。因此，在检查元素时，我得到:

<ul class="token-input-list-facebook">
  <li class="token-input-token-facebook"><p>John Doe</p><span class="token-input-delete-token-facebook">×</span></li><li class="token-input-input-token-facebook"><input type="text" autocomplete="off" autocapitalize="off" id="token-input-" style="outline: none; width: 30px;"><tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 12px; font-family: Ubuntu, 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;"></tester>    </li>
</ul>

<input type="text" name="recipient" ng-model="conversation.recipients" class="messageComposeTextField ng-pristine ng-invalid ng-invalid-required" auto-complete="" placeholder="To :" required="" style="display: none;">

请注意，生成的 tokenInput 标记不是指令的一部分。所以这里真正的问题是我如何封装一个 jquery 插件，在 angularjs 指令中生成它自己的标记？

最佳答案

我建议你使用 ui-select2 ready to use 指令来实现类似的功能@
https://github.com/angular-ui/ui-select2 ，它提供类似于您的要求的“简单标记模式”

检查 new example 。可以找到旧示例 here 。

$scope.tagsSelection = [
    { "id": "01", "text": "Perl" },
    { "id": "03", "text": "JavaScript" }
];

$timeout(function(){
    $scope.tagsSelection.push({ 'id': '02', 'text': 'Java' });
}, 3000);

$scope.tagData = [
    {
        "id": "01",
        "text": "Perl"
    },
    {
        "id": "02",
        "text": "Java"
    },
    {
        "id": "03",
        "text": "JavaScript"
    },
    {
        "id": "04",
        "text": "Scala"
    }
];

$scope.tagAllOptions = {
    multiple: true,
    data: $scope.tagData
};

您可以在以下位置查看选项和文档的详细信息:http://ivaynberg.github.io/select2/