angularjs – tokenInput as angular.js指令

发布时间：2020-12-17 07:20:14 所属栏目：安全来源：网络整理

导读：我正在尝试从James Smith的tokenInput Jquery插件创建一个angular.js指令： http://loopj.com/jquery-tokeninput 这是我到目前为止： antdna = angular.module('Communication',[]);antdna.factory('autoCompleteService',[function() { return { getSource:

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

我建议你使用ui-select2准备使用指令来实现类似的功能@
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/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!