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

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');
            });
        }
    };
}]);

在我的partial中有以下元素：

<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

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

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的最新版本