如何编写一个角度指令来监听 `ngOptions` 的变化？答案

【问题标题】：How can I write an angular directive to listen to changes in `ngOptions`?如何编写一个角度指令来监听 `ngOptions` 的变化？
【发布时间】：2023-04-10 12:54:01
【问题描述】：

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

截至目前，每当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()

【问题讨论】：

标签： angularjs twitter-bootstrap bootstrap-select

【解决方案1】：

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

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

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

【讨论】：