angularjs - tokenInput as angular.js directive -


i'm attempting create angular.js directive james smith's tokeninput jquery plugin: http://loopj.com/jquery-tokeninput

here have far:

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 following markup:

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

tokeninput works issue cannot bind model.

{{conversation.recipients}}  

is blank.

the tokeninput plugin generates it's own markup using list elements (ul , li). upon inspecting element 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;"> 

notice generated tokeninput markup not part of directive. real question here how encapsulate jquery plugin generates own markup within angularjs directive?

i suggest use ui-select2 ready use directive similar functionality @ https://github.com/angular-ui/ui-select2, provides "simple tagging mode" similar requirement

check new example. old example can 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 details options , documentation at: http://ivaynberg.github.io/select2/


Comments

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -