AngularJS通过jQuery修改select选项后无法识别选中值问题求解

根因分析 #

问题由两个原因共同导致：

• 用jQuery动态重写select的option列表后，jQuery Form Styler 插件生成的模拟下拉控件与原生select的事件同步链路断裂，AngularJS 原生监听的change事件无法正常触发
• 指令仅实现了模型到视图的单向同步，没有显式处理视图侧选中值变更后同步回ngModel的逻辑，插件的介入进一步阻断了默认的双向绑定链路

修复后完整指令代码 #

(function() {
    var m = angular.module('utils');

    m.directive('courses', [function() {
        return {
            require: 'ngModel',
            priority: 1,
            link: function(scope, elm, attrs, ngModel) {
                if (!attrs.courses) return;

                // 绑定选中变更事件，复用避免重复绑定
                function syncViewToModel() {
                    scope.$applyAsync(function() {
                        ngModel.$setViewValue($(elm).val());
                    });
                }

                scope.$watch(attrs.courses, function() {
                    var list = scope.$eval(attrs.courses);
                    // 先解绑旧事件，避免内存泄漏
                    $(elm).off('change change.styler', syncViewToModel);
                    
                    // 重绘选项
                    $(elm).html('');
                    for (var catI in list) {
                        var group = $('<optgroup>').attr('label', catI);
                        for (var corI in list[catI]) {
                            group.append($('<option>')
                                .val(list[catI][corI].id)
                                .text(list[catI][corI].title));
                        }
                        $(elm).append(group);
                    }

                    // 恢复选中值：如果当前值不在新选项列表中则清空，可按需调整逻辑
                    var currentVal = ngModel.$viewValue;
                    var valueExists = false;
                    for (var cat in list) {
                        var catItems = list[cat];
                        for (var i = 0; i < catItems.length; i++) {
                            if (catItems[i].id == currentVal) {
                                valueExists = true;
                                break;
                            }
                        }
                        if (valueExists) break;
                    }
                    $(elm).val(valueExists ? currentVal : '');
                    
                    // 刷新样式插件
                    $(elm).trigger('refresh');
                    
                    // 重新绑定变更事件
                    $(elm).on('change change.styler', syncViewToModel);
                    
                    // 同步新的选中值回模型
                    syncViewToModel();
                }, true);

                // 页面销毁时解绑事件，避免内存泄漏
                scope.$on('$destroy', function() {
                    $(elm).off('change change.styler', syncViewToModel);
                });
            }
        };
    }]);
})();

额外说明 #

• 新增的$applyAsync用来保证视图变更安全同步到Angular上下文，不会触发digest already in progress报错
• 同时监听原生change和插件自定义的change.styler事件，兼容模拟控件和原生控件的选中变更
• 增加了选中值合法性校验，切换分类后如果原选中值不在新选项列表内会自动清空，避免出现无效选中状态

内容的提问来源于stack exchange，提问作者Иван