angularjs - Angular Bootstrap 多选择器组件在模型更改后不在选项上显示刻度线

Question

我正在使用 Angular Bootstrap Selectpicker .

我使用的是 Angular 版本 1.4.7。 对于选择器，他们提供指令，

angular.module('angular-bootstrap-select', [])
.directive('selectpicker', ['$parse', function ($parse) {
return {
  restrict: 'A',
  require: '?ngModel',
  priority: 10,
  compile: function (tElement, tAttrs, transclude) {
    tElement.selectpicker($parse(tAttrs.selectpicker)());
    tElement.selectpicker('refresh');
    return function (scope, element, attrs, ngModel) {
      if (!ngModel) return;

      scope.$watch(attrs.ngModel, function (newVal, oldVal) {
        scope.$evalAsync(function () {
          if (!attrs.ngOptions || /track by/.test(attrs.ngOptions)) element.val(newVal);
          element.selectpicker('refresh');
        });
      });

      ngModel.$render = function () {
        scope.$evalAsync(function () {
          element.selectpicker('refresh');
        });
      }
    };
  }

};
}]);

选择器看起来像

<select class="form-control" data-style="btn-default"
            data-live-search="true" selectpicker multiple
            data-selected-text-format="count>2"
            data-collection-name="users"
            ng-model="selectedUsers"
            ng-options="user.name for user in users">
    </select>

在上述情况下，selectedUser 将具有刻度线，如果我从 Controller 更改 selectedUsers 的值。它不显示更新的 selectedUsers 选项的刻度线。

当我选择多个选项时，它会显示所选选项的刻度线。 然后，如果我刷新 View ，虽然 ng-model 仍然有以前的值，但它不显示 ng-model 中值的刻度线。

Plunker

Answer 1

我简化了你的代码来工作。检查这个Demo

.directive('selectpicker', ['$parse', selectpickerDirective]);

function selectpickerDirective($parse) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {

        //New change
        scope.$watch(attrs.ngModel, function(n, o){
          element.selectpicker('val', $parse(n)());
          element.selectpicker('refresh');
        });

    }
  };
}