tokenInput jak angularjs dyrektywy

Question

Ja próbuje utworzyć angularjs dyrektywę od Jamesa Smitha tokenInput Jquery plugin: http://loopj.com/jquery-tokeninput

Oto co mam do tej pory:

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

z następującymi znacznik:

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

TokenInput działa idealnie, ale moim problemem jest to, że nie mogę powiązać z modelem.

{{conversation.recipients}} 

jest pusty.

Wtyczka tokenInput generuje własny znacznik przy użyciu elementów listy (ul i li). Więc po inspekcji elementu uzyskać:

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

Zauważ, że generowane tokenInput znaczników nie jest częścią dyrektywy. Tak więc prawdziwym pytaniem jest tutaj, jak hermetyzować wtyczkę jquery, która generuje własny znacznik w ramach dyrektywy angularjs?

Answer 1

Proponuję użyć ui-select2 gotowy do użycia dyrektywy o podobnej funkcjonalności @ https://github.com/angular-ui/ui-select2, zapewnia prosty tryb „znakowania” podobny do wymogu

Check the new example. Stary przykład można znaleźć 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 
}; 

Można sprawdzić szczegóły dotyczące opcji i dokumentacji w: http://ivaynberg.github.io/select2/

Answer 2

Kontynuując @JqueryGuru sugestia, może byłbyś zainteresowany przyjrzeniu dyrektywy wejściowego znaczniki I zostały wdrożone niedawno: ngTagsInput . Jest to kod w 100% kątowy i ma kilka opcji konfiguracyjnych. Możesz zobaczyć dema here.

Answer 3

Miałem podobne problemy i chociaż alternatywne wtyczki i dyrektywy Angular są bardzo interesujące, nie byłem w stanie zmienić wtyczki tokena z powodu pewnych wymagań projektu, dlatego dodałem logikę aktualizacji modelu do Dodaj/Usuń zmienne konfiguracyjne wtyczki Token Input.

Kod:

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

    } 
}; 


}); 

ten sposób, trzeba tylko użyć dyrektywy token-wejściowy w element wejściowy i będzie działać. Można to uczynić jeszcze bardziej ogólnym, przekazując nazwę zmiennej modelu w attr. Mam nadzieję, że ten kod przyda się osobom, które mają problemy z integracją Joken Token-Input i AngularJS.

Answer 4

Dla osób, które z jakiegokolwiek powodu muszą użyć tokena z pętli, this gist działało idealnie dla mnie. Zauważyłem, że jest to trochę tajemnicze, ponieważ nie jestem bardzo doświadczony w Angular i miał tylko 2 komentarze, więc oto co odkryłem na temat tego, jak z niego korzystać.

dołączyć górny moduł poziom jquery jak:

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

w HTML Masz:

<input token-input="source"> 

W javascript masz:

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

Jeśli chcesz kilka z różnymi opcjami, wygląda na to, że możesz również zrobić coś takiego:

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