Question

我正在使用angular-bootstrap-select插件来设置样式。它基本上是bootstrap-select插件的一个端口，它挂钩成角度。

截至目前，只要ng-model发生变化，它似乎就会更新。不过，我还想听一下ng-options

以下是该插件的相关部分：

angular.module('angular-bootstrap-select', [])
  .directive('selectpicker', ['$parse', '$timeout', selectpickerDirective]);

function selectpickerDirective($parse, $timeout) {
  return {
    restrict: 'A',
    priority: 1000,
    link: function (scope, element, attrs) {
      function refresh(newVal) {
        scope.$applyAsync(function () {
          if (attrs.ngOptions && /track by/.test(attrs.ngOptions)) element.val(newVal);
          element.selectpicker('refresh');
        });
      }

      attrs.$observe('spTheme', function (val) {
        $timeout(function () {
          element.data('selectpicker').$button.removeClass(function (i, c) {
            return (c.match(/(^|\s)?btn-\S+/g) || []).join(' ');
          });
          element.selectpicker('setStyle', val);
        });
      });

      $timeout(function () {
        element.selectpicker($parse(attrs.selectpicker)());
        element.selectpicker('refresh');
      });

      if (attrs.ngModel) {
        scope.$watch(attrs.ngModel, refresh, true);
      }

      if (attrs.ngDisabled) {
        scope.$watch(attrs.ngDisabled, refresh, true);
      }

      scope.$on('$destroy', function () {
        $timeout(function () {
          element.selectpicker('destroy');
        });
      });
    }
  };
}

用法示例：

<select selectpicker ng-options="myOpt.key as myOpt.name for myOpt in myOpts" ng-model="myOptSelection"></select>

所以我想编辑插件以收听myOpts中的更改并运行element.refresh()

Answer 1

到目前为止，我发现最好的方法是在插件中插入以下内容：

  if (attrs.ngOptions) {
    var watch = attrs.ngOptions.match(/in ([A-z0-9]+)$/);
    if (watch) {
      scope.$watch(watch[1], refresh, true);
    }
  }

虽然看起来有点脏...我对角度很新，所以我不确定ngOptions还有其它可能性，或者是否有更简洁的方法来解析它。

如何编写一个angular指令来监听`ngOptions`的变化？

1 个答案: