tokenInput 作为 angular.js 指令

Posted 2023-05-09

【中文标题】tokenInput 作为 angular.js 指令

【英文标题】：tokenInput as angular.js directive

【发布时间】：2013-08-28 21:18:02

【问题描述】：

我正在尝试从 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 插件？

【参考方案1】：

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

【讨论】：

谢谢，但我也在考虑将它与自动完成一起使用。就像 Gmail 添加收件人，当您开始输入姓名时它会自动完成

没问题。该功能已在路线图上。给定时间，它最终会实施。 :)

您的网站上是否有可以点击捐款的地方？我目前可能没有多少钱，但我想捐款。

@Zehelvion 不，目前没有捐款按钮。不过，我很欣赏你捐赠的意图。 :)

@Zehelvion 使用displayProperty 选项设置您希望指令使用的属性。

【参考方案2】：

我建议你使用 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/

【讨论】：

感谢您的建议，我似乎无法让您的小提琴工作

抱歉，这是 MIME 类型的 Chrome 浏览器。在 FF 中运行良好

Select2 很好用，只需添加 ajax 选项即可将用户数据从我的服务器中提取出来。谢谢你的帮助

您正在检查哪个浏览器。在 FF 中它工作正常，我刚刚检查了它

【参考方案3】：

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

代码：

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 时遇到问题的人有用。

【参考方案4】：

对于无论出于何种原因需要使用 loopj 令牌输入的人，this gist 对我来说非常适合。不过我发现它有点神秘，因为我对 Angular 不是很有经验，而且他只有 2 个 cmets，所以这就是我想出的如何使用它。

您包括*** 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 */