如何将封装mdSelect的AngularJS自定义组件重置至原始状态？

嘿，这个场景我之前在项目里碰过好多次，核心就是要在切换待编辑对象时，同时搞定数据绑定的重置和mdSelect内部UI状态的清理，下面给你几个经过验证的方案，按从简单到进阶的顺序来：

1. 基础方案：重置绑定数据+延迟同步UI #

最直接的方式就是在点击「下一步」时，先清空组件的旧数据，再加载新对象的配置，最后用$timeout确保UI能同步更新——因为mdSelect有时候会因为Angular的 digest 周期问题，没及时响应数据变化。

组件控制器示例代码 #

假设你的组件控制器里有vm.options（可用值）、vm.defaultValue（默认值）、vm.currentValue（当前选中值）这几个绑定变量：

angular.module('yourApp').controller('CustomMdSelectCtrl', function($scope, $timeout) {
  var vm = this;

  // 外部调用的重置方法，传入新的待编辑对象
  vm.resetForNewItem = function(newItem) {
    // 第一步：清空旧数据，避免残留状态
    vm.options = [];
    vm.currentValue = null;

    // 第二步：加载新对象的配置
    vm.options = newItem.availableOptions;
    vm.defaultValue = newItem.defaultOption;

    // 第三步：延迟设置当前值，强制触发mdSelect重新渲染
    $timeout(function() {
      vm.currentValue = newItem.currentOption || vm.defaultValue;
    }, 0);
  };
});

然后在mdDialog的「下一步」按钮点击事件里，调用这个方法就行：

<md-button ng-click="vm.nextItem()">下一步</md-button>

// mdDialog控制器里的下一步方法
vm.nextItem = function() {
  // 获取下一个待编辑对象
  var nextItem = vm.getNextEditableItem();
  // 调用自定义组件的重置方法
  vm.customSelectCtrl.resetForNewItem(nextItem);
};

2. 进阶方案：利用组件的$onChanges钩子（AngularJS 1.5+） #

如果你的组件是用AngularJS 1.5+的component()API定义的，那可以用$onChanges生命周期钩子，自动监听输入属性的变化，一旦新的配置进来就自动重置组件，不用手动调用方法，更符合组件化的设计。

自定义组件示例 #

angular.module('yourApp').component('customMdSelect', {
  bindings: {
    // 单向绑定：可用值、默认值
    options: '<',
    defaultValue: '<',
    // 双向绑定：当前选中值
    currentValue: '='
  },
  controller: function($timeout) {
    var vm = this;

    // 监听输入属性变化
    vm.$onChanges = function(changes) {
      // 当可用值或默认值变化时，重置选中状态
      if (changes.options || changes.defaultValue) {
        // 先清空，再延迟赋值，避免UI不同步
        vm.currentValue = null;
        $timeout(function() {
          vm.currentValue = vm.defaultValue;
        }, 0);
      }
    };
  },
  template: `
    <md-select ng-model="$ctrl.currentValue" md-no-ink="true">
      <md-option 
        ng-repeat="opt in $ctrl.options track by opt.value" 
        value="{{opt.value}}">
        {{opt.label}}
      </md-option>
    </md-select>
  `
});

这样在mdDialog里切换对象时，只要更新组件的options和defaultValue绑定，组件就会自动触发重置：

<custom-md-select 
  options="vm.currentItem.availableOptions"
  default-value="vm.currentItem.defaultOption"
  current-value="vm.currentItem.currentOption">
</custom-md-select>

3. 终极方案：强制重置mdSelect的内部状态 #

有时候光改数据还不够——比如mdSelect的下拉菜单可能还保持展开状态，或者选中的高亮样式残留。这时候可以直接调用mdSelect指令的内部方法来重置它的UI状态。

实现代码 #

在组件的模板里给mdSelect加个标识，方便获取元素：

<md-select 
  ng-model="$ctrl.currentValue" 
  md-no-ink="true"
  class="custom-select">
  <!-- 选项内容 -->
</md-select>

然后在组件控制器里注入$element，获取mdSelect的指令实例并调用reset()方法：

angular.module('yourApp').controller('CustomMdSelectCtrl', function($element, $timeout) {
  var vm = this;

  vm.resetForNewItem = function(newItem) {
    // 先重置数据
    vm.options = newItem.availableOptions;
    vm.defaultValue = newItem.defaultOption;
    vm.currentValue = null;

    $timeout(function() {
      // 设置新的选中值
      vm.currentValue = newItem.currentOption || vm.defaultValue;
      
      // 获取mdSelect的指令控制器，重置内部状态
      var mdSelectEl = $element.find('md-select')[0];
      var mdSelectCtrl = angular.element(mdSelectEl).controller('mdSelect');
      if (mdSelectCtrl) {
        mdSelectCtrl.reset(); // 这个方法会重置下拉菜单的展开状态、选中高亮等
      }
    }, 0);
  };
});

注意事项 #

• 尽量用数据绑定驱动UI，避免直接操作DOM，$timeout的作用是确保Angular完成当前的digest周期后再执行操作，避免UI不同步。
• 如果用双向绑定的currentValue，要确保父scope（mdDialog的scope）里的变量也被正确更新，因为组件的变化会同步到父scope。
• 记得给ng-repeat加上track by，避免切换选项时重复创建DOM元素，提升性能。

内容的提问来源于stack exchange，提问作者Garret Wilson