Angularjs Custom select2指令

Question

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

指示

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某个高值增加到某个高值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>,我的App已经完全开发了,我只想用select2替换普通的选择框.

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

Answer 1

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

请看看这款Plunker

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

我的想法是让我们相信jquery-Select2和AngularJS来处理这些变化事件.

我们只需要注意Angular方式的变化,并以Select2的方式更新select

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

//...

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

注意:我添加了2款新手表,我想你想拥有它!