Angularjs 自定义 select2 指令 [英] Angularjs Custom select2 directive

问题描述

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

I have created simple custom AngularJs directive for this awesome jquery plugin jQuery-Select2 as follows:

指令

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 插件替换.

It is working as expected and my normal select element is replaced by select2 plugins.

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

However there is one issue though, sometimes it is showing default value i.e Select Country here although in dropdown proper model value is auto selected.

现在，如果我将 $timeout 间隔从 200 增加到某个高值，例如 1500，它正在工作，但会延迟指令的呈现.此外，我认为这不是正确的解决方案，因为我的数据是通过 ajax 加载的.

Now if I increase $timeout interval from 200 to some high value say 1500, it is working but delays the the rendering of directive. Also I think this is not proper solution for it, as my data is getting loaded via ajax.

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

I have also tried to update directive as follows, but no luck in that either:

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 替换普通的选择框.

PS: I know that there is similar module present ui-select, but it requires some different markup in form of <ui-select></ui-select>, and my App is already fully developed and I just want to replace normal select box with select2.

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

So can you please guide me how can I resolve this issue and make sure that directive keeps in sync with latest behaviour?

推荐答案

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

It might be simpler than you expected!

请看看这个Plunker

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

Basically, all plugins, Angularjs $watch need to be based on something. I'm not 100% sure for jQuery-select2; but I think that's just the control's normal DOM events. (And in the case of Angular $watch, it is a "dirty checking loop")

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

My idea is that let's trust jquery-Select2 and AngularJS for handling those change events.

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

We just need to watch for change in Angular's ways and update the select in Select2's ways

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

//...

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

注意:我已经添加了 2 个新手表，我想您会喜欢它！

Notice: I have added in 2 new watch which I think you would like to have!

这篇关于Angularjs 自定义 select2 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！