7

我正在尝试从 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 工作完美，但我的问题是我无法绑定到模型。

{{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 标记不是指令的一部分。所以这里真正的问题是如何封装一个在 angularjs 指令中生成自己的标记的 jquery 插件？

4

4 回答 4

10

遵循@JqueryGuru 的建议，也许您有兴趣查看我最近实现的标签输入指令：ngTagsInput。它是 100% 的 Angular 代码，并且有几个配置选项。你可以在这里看到一些演示。

于 2013-08-26T13:57:34.103 回答
3

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

检查新示例。旧示例可以在这里找到。

$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/

于 2013-08-26T11:52:08.923 回答
0

对于出于某种原因需要使用 loopj 令牌输入的人来说，这个要点对我来说非常有效。我发现它有点神秘，因为我对 Angular 不是很有经验，而且他只有 2 条评论，所以这就是我想出的关于如何使用它的内容。

您包括顶级 jquery 模块，如：

angular.module('myModule', ['jquery'])

在 html 中，您有：

<input token-input="source">

在javascript中你有：

$scope.source = {/* data */};
$scope.tokenInput = {/* options */}

如果你想有几个不同的选项，看起来你也可以做类似的事情：

<input id="id" token-input="source">
$scope.source = {/* data */};
$scope.tokenInput_id = {/* options */}
于 2015-04-21T16:48:30.993 回答
0

我有类似的问题，虽然备用插件和 Angular 自己的标签指令非常有趣，但由于某些项目要求，我无法更改令牌输入插件，因此我将模型更新逻辑添加到 Token 的添加/删除配置变量中输入插件。

编码：

vehicleModule.directive('tokenInput', function ($rootScope,$parse, $http){
return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
        var prepopMailsJson = getElementsAsJson(elem.attr('value'));            
        elem.tokenInput(applicationRootUrl +"rest/firmwareManager/getAvailableVehicles", {
            prePopulate: prepopMailsJson,
            theme: "facebook",
            minChars: 2,
            resultsLimit: 12,
            propertyToSearch: "id",
            resultsFormatter: function(item){ 
                var name = "";
                if(typeof(item.name) != 'undefined' && item.name != null){
                    name = item.name;
                }
                return "<li>" + "<div style='display: inline-block; padding-left: 10px;'><div class='id'>" + item.id + "</div></div></li>"; 
            },
            tokenFormatter: function(item) { 
                return "<li><p>" + item.id + "</p></li>"; 
            },
            hintText: vehicleTokenInputTranslation.hintText,
            noResultsText: vehicleTokenInputTranslation.noResultsText,
            searchingText: vehicleTokenInputTranslation.searchingText,
            preventDuplicates: true,
            queryParam: "partialName",
            tokenLimit: 1,
            onAdd : function(item){                 
                scope.vehicleId = item.id;
            },
            onDelete : function(item){
                scope.vehicleId = '';
                scope.$apply();
            }
        });

    }
};


});

这样，您只需要在输入元素中使用 token-input 指令，它就可以工作。通过在 attr 中传递模型变量名称，这可以变得更加通用。我希望这段代码对在集成 JqueryUI Token-Input 和 AngularJS 时遇到问题的人有用。

于 2014-05-08T20:21:27.297 回答