pourquoi jquery-choisi ne fonctionne pas à l'intérieur des onglets angi-ui - angularjs, onglets, angulaire-ui, jquery-choisi

<tabset  class="ui-tab">
<tab heading="General Details">
<select class="chosen chzn-done chosen-select">
<option value=""></option>
<option value="1">contains</option>
<option value="2">does not contain</option>
<option value="3">is equal to</option>
</select>
</tab>
</tabset>


jQuery(document).ready(function () {
jQuery(".chosen").chosen({
no_results_text: "Oops, nothing found!",
allow_single_deselect: true,
width: "20%"
});
});

C'est le code que j'ai testé. Ici, le menu déroulant de choisi ne fonctionne pas mais fonctionne correctement à l’extérieur du <tabset>. Comment devrais-je résoudre ce problème?

Réponses:

La manière angulaire est de créer une directive pour les plugins jQuery.

J’en ai créé un simple pour le jquery-choisi que vous avez mentionné. Voici le plongeur:

var app = angular.module("app", ["ui.bootstrap"]);

app.directive("chosen", function(){
return {
link: function(scope, element){
element.chosen({
no_results_text: "Oops, nothing found!",
allow_single_deselect: true,
width: "20%"
});
}
};
});

MODIFIER: Il y a déjà une bibliothèque à intégrer jquery-choisi à angulaire: angulaire choisi