模型未在 Angular.js 指令中更新 bootstrap-multiselect

Question

我有以下指令：

app.directive('scMultiselect', [function() {
    return {
        link: function(scope, element, attrs) {
            element = $(element[0]);

            element.multiselect({
                enableFiltering: true,

                // Replicate the native functionality on the elements so
                // that Angular can handle the changes for us
                onChange: function(optionElement, checked) {
                    optionElement.prop('selected', false);

                    if (checked)
                        optionElement.prop('selected', true);

                    element.change();
                }
            });

            scope.$watch(function () {
                return element[0].length;
            }, function () {
                element.multiselect('rebuild');
            });

            scope.$watch(attrs.ngModel, function() {
                element.multiselect('refresh');
            });
        }
    };
}]);

以及我部分中的以下元素：

<select
    id="level_teachers"
    class="multiselect col-sm-10"
    multiple="multiple"
    ng-model="level.teachers"
    ng-options="teacher.id as teacher.name for teacher in teachers"
    sc-multiselect>
</select>

bootstrap-multiselect 控件初始化并正确显示，但是当我在其中选择条目时，我的模型 (level.teachers) 仍然为空。

Answer 1

有同样的问题，这对我有用：

首先你添加 ngModel 作为链接函数的第四个参数。它非常有用 - 更多关于它的信息：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

然后您基本上必须在 onChange 方法中向/从您的 ngModel 中“手动”添加/删除选项。

ngModel.$setViewValue() 更新值，ngModel.$render 和 scope.$apply() 使其可见并进一步传播新模型:)

如果你只有一个选择，那么它会更容易 - 因为没有数组控制，所以代码更少 - 只需使用 $setViewValue()、$render() 和 $apply()。

app.directive('scMultiselect', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element = $(element[0]);

            element.multiselect({
                enableFiltering: true,
                onChange: function(optionElement, checked) {
                    optionElement.prop('selected', false);

                    var modelValue = ngModel.$modelValue; // current model value - array of selected items
                    var optionText = optionElement[0].text; // text of current option
                    var optionIndex = modelValue.indexOf(optionText); 
                    if (checked) {
                        if ( optionIndex == -1) { // current option value is not in model - add it
                            modelValue.push(optionText)
                        }
                        optionElement.prop('selected', true);
                    } else if ( optionIndex > -1 ) { // if it is - delete it
                        modelValue.splice(optionIndex,1);
                    }

                    ngModel.$setViewValue(modelValue);
                    ngModel.$render();
                    scope.$apply();
                }
            });

            scope.$watch(element[0].length, function () {
                element.multiselect('rebuild');
            });
        }
    };
});

希望它也对你有用:)

Answer 2

这可能是因为 Bootstrap 组件不是以允许 Angularjs 使用它们的方式构建的。在您实例化它们之后，它们实际上并没有办法更新自己，更重要的是，它们不参与 Angularjs 的更新过程。无论如何，好消息是有人主动在 Angularjs 中重写了这些引导组件，以便我们可以使用它们。

http://angular-ui.github.io/bootstrap/

如果您使用的是 Bootstrap 3.x，请获取最新版本。如果你卡在 2.3.x v0.8 是支持 2.3.x 的最后一个版本