tokenInput作爲angular.js指令

Question

我試圖創建詹姆斯·史密斯的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指令中生成它自己的標記？

Answer 1

我建議你使用的用戶界面，選擇2準備使用指令來實現類似功能@ 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/

Answer 2

跟進@JqueryGuru建議，也許你會有興趣在考慮看看一個標籤輸入指令，我最近實施：ngTagsInput 。這是100％的Angular代碼，並有幾個配置選項。你可以看到一些演示here。

Answer 3

我有類似的問題，雖然備用插件和Angular自己的標籤指令非常有趣，但由於某些項目需求，我無法更改標記輸入插件，因此我將模型更新邏輯添加到添加/刪除令牌輸入插件的配置變量。

驗證碼：

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(); 
      } 
     }); 

    } 
}; 


}); 

這樣，你只需要使用令牌輸入指令在你輸入元素，它會工作。通過在attr中傳遞模型變量名，可以使其更具通用性。我希望這段代碼對於那些有JqueryUI Token-Input和AngularJS集成問題的人有用。

Answer 4

對於無論什麼原因都需要使用loopj token-input的人，this gist對我來說是完美的。但是我發現它有點神祕，因爲我對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 */}