Question

我想构建一个将下拉列表（select）链接到外部jquery插件的指令。

这是我的指令的templateUrl视图的代码：

<select multiple="multiple">
  <option data-ng-repeat="(key,label in opts)"
     value="{{key}}">{{label}}</option>
</select>

这是我的指令的链接功能：

link: function(scope, element, attrs)
   {
       console.log( scope.opts );
       console.log( $(element).html() );
       $(element).chosen(); //call external plugin
   }

这里的问题是，出于某种原因，当调用link函数时，尚未使用ng-repeat填充选项。因此，当我调用jquery插件时，它会显示一个空的下拉列表，即使稍后在select上填充了选项。

console.log( scope.opts );的输出正确显示带有选项的对象，而console.log( $(element).html() );仅显示：

当ng-repeat填充了select时，有没有办法得到通知，所以我只能调用外部插件？

Answer 1

这个问题的解决方案（不知道dj何时被angularJS更新）是使用$timeout。但是，通过下拉列表，ngOptions非常难以与外部插件集成。因此，我建议其他任何想要将所选插件或任何其他插件与下拉列表集成的人，只需使用ngRepeat和ngSelected使用普通<option>s代替ngOptions

AngularJS：使用ng-repeat与外部插件集成指令的问题

1 个答案: