javascript - Angularjs 自定义 select2 指令

Question

我已经为这个很棒的 jquery 插件创建了简单的自定义 AngularJs 指令 jQuery-Select2如下:

指令

app.directive("select2",function($timeout,$parse){
    return {
        restrict: 'AC',
        link: function(scope, element, attrs) {
            $timeout(function() {
                $(element).select2();
            },200); 
        }
    };
});

在 HTML 模板中的用法:

<select class="form-control" select2 name="country"
data-ng-model="client.primary_address.country"
ng-options="c.name as c.name for c in client.countries">
     <option value="">Select Country</option>
</select>

它按预期工作，我的正常 select元素替换为 select2插件。

但是有一个问题，有时它会显示默认值，即 Select Country这里虽然在下拉列表中自动选择了正确的模型值。

现在如果我增加 $timeout间隔自 200对一些高值(value)的人说 1500 ，它正在工作但延迟了指令的呈现。此外，我认为这不是合适的解决方案，因为我的数据是通过 ajax 加载的。

我也尝试过如下更新指令，但也没有成功:

app.directive("select2",function($timeout,$parse){
    return {
        restrict: 'AC',
        require: 'ngModel',
        link: function(scope, element, attrs) {
            var modelAccessor = $parse(attrs.ngModel);
            $timeout(function() {
                $(element).select2();
            });
            scope.$watch(modelAccessor, function (val) {
                if(val) {
                    $(element).select2("val",val);
                }
            });
        }
    };
});

PS:我知道现在有类似的模块ui-select , 但它需要一些不同的标记，形式为 <ui-select></ui-select> ，我的应用程序已经完全开发，我只想用 select2 替换普通的选择框。

那么您能否指导我如何解决此问题并确保该指令与最新行为保持同步？

Answer 1

它可能比你想象的要简单!

请看这个Plunker

基本上，所有的插件，Angularjs $watch 都需要基于一些东西。我不是 100% 确定 jQuery-select2；但我认为这只是控件的正常 DOM 事件。 (在 Angular $watch 的情况下，它是一个“脏检查循环”)

我的想法是让我们信任 jquery-Select2 和 AngularJS 来处理这些更改事件。

我们只需要观察 Angular 方式的变化并以 Select2 方式更新选择

var refreshSelect = function() {
    if (!element.select2Initialized) return;
    $timeout(function() {
        element.trigger('change');
    });
};

//...

scope.$watch(attrs.ngModel, refreshSelect);

注意:我添加了 2 款新 watch ，我认为您会喜欢!