TokenInput as angular.js directive

Question

I am trying to create an angular.js directive from James Smith tokenInput jQuery plugin: http://loopj.com/jquery-tokeninput

Here is what I still have:

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

With the following markup:

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

TokenInput works fine, but the problem is that I cannot bind to the model.

 {{conversation.recipients}} 

is empty.

The tokenInput plugin generates its own markup using list items (ul and li). Therefore, checking the element, I get:

 <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;"> 

Note that the generated tokenInput markup is not part of the directive. So the real question is, how can I encapsulate a jquery plugin that generates its own markup in the angularjs directive?

Answer 1

I suggest you use ui-select2, ready to use directives for similar functionality @ https://github.com/angular-ui/ui-select2 , it provides a "simple tagging mode" similar to your requirement

Check out the new example . An old example can be found 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 }; 

You can check the parameter information and documentation at: http://ivaynberg.imtqy.com/select2/

Answer 2

Following @JqueryGuru's suggestion, you might be interested to take a look at the tag input directive that I recently implemented: ngTagsInput . This is 100% Angular code and has several configuration options. You can see some demos here .

Answer 3

I had similar problems, and while alternative plugins and Angular native tag directives are very interesting, I could not change the I / O plugin due to some project requirements, so I added the model update logic to the Add / Remove plugin configuration variables input-output

The code:

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

So you need to use the I / O directive in your input element and it will work. This can be made even more general by passing the model variable name to attr. I hope this code is useful to people who have problems integrating JookeryUI Token-Input and AngularJS.

Answer 4

For people who for some reason need to use the loopj token marker, this gist worked fine for me. I found this to be rather cryptic since I am not very experienced with Angular and it had only 2 comments, so this is what I understood about how to use it.

You include a top-level jquery module, for example:

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

In html you have:

 <input token-input="source"> 

In javascript you have:

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

If you want to have several options with different parameters, it looks like you can also do something like:

 <input id="id" token-input="source"> $scope.source = {/* data */}; $scope.tokenInput_id = {/* options */}