Selectize＆AngularJS不与选择框一起玩（多个选项）

I've been trying to implement Selectize with AngularJS (1.2.4). I'm using this directive to interface with the plugin and everything is working smoothly until now. When using the ngModel from a normal select box It works fine, and returns the expected object but when I try to use it with the multiple attribute, it won't set the model.

我一直试图用AngularJS(1.2.4)实现Selectize。我正在使用这个指令与插件接口,一切都运行顺利到现在为止。当从正常选择框使用ngModel它工作正常,并返回预期的对象但是当我尝试使用它与multiple属性时,它不会设置模型。

I've inspected the DOM and appears the script removes unselected options from the hidden select and that might be messing with the angular binding.

我已经检查了DOM并且看起来脚本从隐藏的选择中移除了未选择的选项,这可能会使角度绑定变得混乱。

I've created a Plunkr to demonstrate the behaviour.

我创建了一个Plunkr来演示这种行为。

http://plnkr.co/It6C2EPFHTMWOifoYEYA

Thanks

1 个解决方案

#1

As mentioned in the comments above, your directive must listen to changes in the selectize plugin and then inform angular of what happened via ng-model.

如上面的评论所述,您的指令必须听取选择插件中的更改,然后通过ng-model告知角度。

First, your directive needs to ask for an optional reference to the ngModel controller with the following:

首先,您的指令需要使用以下内容来请求对ngModel控制器的可选引用:

require: '?ngModel'.

It is injected into your link function as an argument in the 4th position:

它作为第4个位置的参数注入到链接函数中:

function(scope,element,attrs,ngModel){}

Then, you must listen for changes in selectize with $(element).selectize().on('change',callback)

然后,你必须用$(element).selectize()。on('change',callback)来监听选择中的变化。

and inform ngModel with ngModel.$setViewValue(value)

并使用ngModel通知ngModel。$ setViewValue(value)

Here is a modified version of your directive. It should get you started.

这是您的指令的修改版本。它应该让你开始。

angular.module('angular-selectize').directive('selectize', function($timeout) {
    return {
        // Restrict it to be an attribute in this case
        restrict: 'A',
        // optionally hook-in to ngModel's API 
        require: '?ngModel',
        // responsible for registering DOM listeners as well as updating the DOM
        link: function(scope, element, attrs, ngModel) {
            var $element;
            $timeout(function() {
                $element = $(element).selectize(scope.$eval(attrs.selectize));
                if(!ngModel){ return; }//below this we interact with ngModel's controller
                //update ngModel when selectize changes
                $(element).selectize().on('change',function(){
                    scope.$apply(function(){
                        var newValue = $(element).selectize().val();
                        console.log('change:',newValue);                    
                        ngModel.$setViewValue(newValue);
                    });
                });
            });
        }
    };
});

Also:

plunker
angular docs for ngModelController

ngModelController的angular docs

#1