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>形式的一些不同标记，并且我的App已经完全开发，我只想用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!

请查看此柱塞

基本上，所有插件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屋！