AngularJS 选择的插件，chosen:updated 不工作，在浏览器中工作

Question

我已将所选插件集成到我的 angularjs 应用程序中。我的 app.js 看起来像这样。

myApp.directive('chosen', function() {

    var linker = function (scope, element, attr) {
        scope.$watch('countriesList', function() {
            $('#countries').trigger('chosen:updated');
            console.log('I acctuallty get in here');
        })
        element.chosen();
    };

    return {
        restrict: 'A',
        link: linker
    };
})

我的 select 看起来像这样

<div class="control-group">
  <label for ="countries" class="control-label">Countries: </label>
  <div class="controls">
    <select chosen ng-model="countries" id="countries" ng-options="country.name for country in countriesList"  data-placeholder="Select Countries" multiple class="span chzn-select"></select>  
  </div>
</div>

问题是当页面首次加载时 select 中没有显示任何内容。当您检查元素时，选项就在那里。

chosen:updated 似乎不起作用。我把 console.log() 放在手表上，它正在发射。如果我在浏览器中运行和 .trigger('chosen:updated') 它就可以完美运行。我确实尝试了 element.trigger 但这也没有用。太令人沮丧了！

Answer 1

在调用 chosen 之前，您需要让 Angular（实际上是浏览器）正确呈现 select。您可以使用 setTimeout 或 Angular 的 $timeout.

来完成此操作

app.directive('chosen', function($timeout) {

  var linker = function(scope, element, attr) {

    $timeout(function () {
      element.chosen();
    }, 0, false);
  };

  return {
    restrict: 'A',
    link: linker
  };
});

第三个参数 false 防止不必要的摘要循环。

演示： http://plnkr.co/edit/9Afq65uatTjnb4J6ICcB?p=preview

如果您需要动态添加或删除项目，这将起作用：

app.directive('chosen', function($timeout) {

  var linker = function(scope, element, attr) {

    scope.$watch('countriesList', function() {
      $timeout(function() {
        element.trigger('chosen:updated');
      }, 0, false);
    }, true);

    $timeout(function() {
      element.chosen();
    }, 0, false);
  };

  return {
    restrict: 'A',
    link: linker
  };
});

演示： http://plnkr.co/edit/rEBu6d3HtaNhThWidB5h?p=preview

请注意，默认情况下 $watch 使用引用相等性来确定是否执行侦听器。如果您向数组添加一个项目，变量 countriesList 仍将引用同一个数组，因此侦听器将不会执行。

传递给 $watch 的第三个参数 true 使其使用 angular.equals 而不是引用相等性。

AngularJS 选择的插件，chosen:updated 不工作，在浏览器中工作

AngularJS chosen plugin, chosen:updated not working, works in browser

html

javascript

angularjs

jquery-chosen