angularjs - 为什么 jquery-chosen 在 angular-ui 的选项卡内不起作用

Question

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

这是我测试过的代码。这里选择的下拉菜单不起作用，但在 <tabset> 之外正常工作.我应该如何解决这个问题？

Answer 1

Angular 方法是为 jQuery 插件创建一个指令。

我为您提到的 jquery-chosen 创建了一个简单的。这是plunker :

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

编辑 :
已经有一个库可以将 jquery-chosen 集成到 angular: angular-chosen