Question

我正在使用这个jquery插件selectric并尝试用我的角度下拉来连接它。

如果下拉列表中的html在html中有硬编码选项并且我只是这样做，那么它可以正常工作

    $('select, .select').selectric();

但是，如果我像这样动态加载我的下拉数据

<select class="form-control" ng-model="myAddress" ng-options="address.addressLines for address in search.result.addresses" size="{{numAddressOptions}}">
</select>

我在selectric插件中出现了javascript错误

TypeError: $li[index] is undefined

我尝试将selectric插件添加为指令

 <select class="form-control" ng-model="myAddress" ng-options="address.addressLines for address in search.result.addresses" size="{{numAddressOptions}}" selectric>
        </select>

和我的指示

.directive('selectric', function(){
  'use strict';
  return{
    restrict: 'AE',
    link: function(scope, element, attrs) {
      $(element).selectric();
    }
  };
});

关于这里可能出现什么问题的任何想法？

Answer 1

由于ng-options是一个优先级为0的指令，因此无法保证指令的链接功能在它之后触发：Angular 1.3.7 Compile Docs。

优先

当在单个DOM元素上定义了多个指令时，   有时需要指定指令的顺序   适用。优先级用于在指令之前对指令进行排序   编译函数被调用。优先级定义为数字。   首先编译具有更高数字优先级的指令。   预链接功能也按优先级顺序运行，但后链接   函数以相反的顺序运行。指令的顺序与   相同的优先级未定义。默认优先级为0。

要实现所需的行为，您需要将对象传递给在其模板中创建select元素的指令。这是一个很好的例子：https://stackoverflow.com/a/14586825/1861459。这应该将您的链接方法调用移动到指令生命周期的正确部分（在模板中的指令完成编译之后）。

您还可以将restrict: 'AE',更改为restrict: 'E',并将您的HTML更改为<selectric addresses="{{ search.result.addresses }}" ...></selectric>

Angular使用Jquery插件问题...动态下拉数据

1 个答案: