AngularJS md-steppers步进器无需新增HTML按钮通过JS返回初始状态方案

解决方案 #

你使用的是AngularJS Material的md-steppers组件，直接通过JS修改组件对应作用域的状态变量即可实现重置，无需修改原有HTML代码。

核心重置代码 #

function resetStepper() {
  // 取步进器容器元素
  const stepperContainer = document.getElementById('stepp');
  // 获取AngularJS作用域
  const scope = angular.element(stepperContainer).scope();

  // 触发AngularJS脏检查更新状态
  scope.$apply(() => {
    // 重置选中步骤到第一个
    scope.selected = 0;
    // 还原所有步骤的初始状态
    scope.step1 = { completed: false };
    scope.step2 = { completed: false, disabled: true };
    scope.step3 = { completed: false, disabled: true };
  });
}

绑定点击触发逻辑 #

你可以将上述重置函数绑定到任意现有页面元素的点击事件上，不需要新增HTML按钮，示例代码如下：

document.addEventListener('DOMContentLoaded', () => {
  // 将选择器替换为你需要绑定点击事件的现有元素
  // 例：绑定到第一个步骤的标签：const trigger = document.querySelector('.md-step:nth-child(1) .md-step-label')
  const trigger = document.querySelector('#你要绑定的现有元素ID');
  if (trigger) {
    trigger.addEventListener('click', resetStepper);
  }
});

把上述两段代码直接写入你的JS文件即可生效。 #

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