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
Post a Comment