我一直试图用AngularJS(1.2.4)实现Selectize.我正在使用
this directive与插件接口,一切都运行顺利,直到现在.当从正常选择框使用ngModel它工作正常,并返回预期的对象但是当我尝试使用它与multiple属性时,它不会设置模型.
我已经检查了DOM并且看起来脚本从隐藏的选择中删除了未选择的选项,这可能会使角度绑定变得混乱.
我创建了一个Plunkr来演示这种行为.
http://plnkr.co/It6C2EPFHTMWOifoYEYA
谢谢
如上面的评论中所述,您的指令必须监听选择插件中的更改,然后通过ng-model通知角度.
首先,您的指令需要使用以下内容请求对ngModel控制器的可选引用：
要求：’？ngModel’.
function(scope,element,attrs,ngModel){}
然后,你必须听取选择中的变化
$(元素).selectize().在( ‘变化’,回调)
并使用ngModel通知ngModel.$setViewValue(value)
这是您的指令的修改版本.它应该让你开始.
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,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);
});
});
});
}
};
});
也：
