tokenInput come angular.js direttiva

Question

Sto tentando di creare una direttiva angular.js da tokenInput plugin jQuery di James Smith: http://loopj.com/jquery-tokeninput

Ecco quello che ho finora:

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

Con la seguente markup:

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

TokenInput funziona perfettamente ma il mio problema è che non riesco a legarmi al modello.

{{conversation.recipients}} 

vuoto.

Il plug-in tokenInput genera il proprio markup utilizzando gli elementi di lista (ul e li). Così sul ispezionare l'elemento ottengo:

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

Si noti che il markup tokenInput generato non è parte della direttiva. Quindi la vera domanda qui è come incapsulare un plugin jquery che genera il proprio markup all'interno di una direttiva angularjs?

Answer 1

suggerisco di utilizzare ui-select2 pronto per l'uso di direttiva per una funzionalità simile @ https://github.com/angular-ui/ui-select2, fornisce "semplice modalità di etichettatura" simile al vostro requisito

Controllare il new example. Il vecchio esempio può essere trovato 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 
}; 

È possibile verificare i dettagli delle opzioni e di documentazione a: http://ivaynberg.github.io/select2/

Answer 2

In seguito @JqueryGuru suggerimento, forse si sarebbe interessato a dare un'occhiata a una direttiva tag di ingresso Ho implementato di recente: ngTagsInput . È un codice angolare al 100% e ha diverse opzioni di configurazione. Puoi vedere alcune demo here.

Answer 3

Ho avuto problemi simili e mentre il plug-in alternativo e le direttive del proprio tag Angular sono molto interessanti, non ero in grado di modificare il plug-in di input token a causa di alcuni requisiti del progetto, quindi ho aggiunto la logica di aggiornamento del modello in Aggiungi/Elimina variabili di configurazione del plugin Token Input.

Il Codice:

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

    } 
}; 


}); 

In questo modo, avete solo bisogno di utilizzare la direttiva token-ingresso nel vostro elemento di input e funzionerà. Questo può essere reso ancora più generico passando il nome della variabile del modello in attr. Spero che questo codice sia utile per le persone che hanno problemi con l'integrazione di Token-Input e AngularJS di JqueryUI.

Answer 4

Per le persone a cui è richiesto l'utilizzo dell'ingresso del token loopj per qualsiasi motivo, this gist ha funzionato perfettamente per me. L'ho trovato comunque un po 'criptico, dato che non ho molta esperienza con Angular e aveva solo 2 commenti, quindi ecco cosa ho capito su come usarlo.

si include il modulo di livello jquery cima come:

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

nel codice HTML si dispone:

<input token-input="source"> 

Nella javascript si dispone:

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

Se si desidera avere diversi con diverse opzioni, sembra che si potrebbe anche fare qualcosa di simile: