如何仅刷新HTML页面局部 重置stepper步骤器每次从第一步启动

解决方案 #

方案1：直接重置AngularJS作用域状态（推荐，性能更高） #

你遇到的状态残留问题本质是md-stepper绑定的AngularJS作用域变量没有在切换节点时重置，不需要刷新DOM，直接操作作用域变量即可：
修改你的.js文件中的click函数，在显示对应stepper前加入状态重置逻辑，完整代码如下：

var click = function (d){
  document.getElementById('stepperTwoLabs').style.display='none';
  document.getElementById('stepperThreeLabs').style.display='none';
  if(d.parent.name == 'Buffer Overflow' || d.parent.name == 'Password Cracking' || d.parent.name == 'Denial of Service' ||
     d.parent.name == 'Privilege Escalation' || d.parent.name == 'Web Hacking' ) {
       vm.numlab=d.children.length;
       if (d.children.length==2) {
         // 重置2个实验的stepper状态
         var stepper2Scope = angular.element(document.querySelector('#stepperTwoLabs md-card')).scope();
         stepper2Scope.$apply(() => {
           stepper2Scope.selected = 0;
           stepper2Scope.step1.completed = false;
           stepper2Scope.step2.disabled = true;
           stepper2Scope.step2.completed = false;
           stepper2Scope.step3.disabled = true;
           stepper2Scope.step3.completed = false;
         });
         document.getElementById('stepperTwoLabs').style.display='block';
         for(var i=0; i< d.children.length; i++) {
           var lab=d.children[i].name;
           $('#iframe'+i).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
         }
      } else if (d.children.length==3) {
        // 重置3个实验的stepper状态
        var stepper3Scope = angular.element(document.querySelector('#stepperThreeLabs md-card')).scope();
        stepper3Scope.$apply(() => {
          stepper3Scope.selected = 0;
          stepper3Scope.step1.completed = false;
          stepper3Scope.step2.disabled = true;
          stepper3Scope.step2.completed = false;
          stepper3Scope.step3.disabled = true;
          stepper3Scope.step3.completed = false;
          stepper3Scope.step4.disabled = true;
          stepper3Scope.step4.completed = false;
        });
        document.getElementById('stepperThreeLabs').style.display='block';
        for(var i=0; i<d.children.length; i++) {
          var lab=d.children[i].name;
          var j=i+2;
          $('#iframe'+j).attr('src', 'http://localhost:18181/lab/use/NS/'+lab);
        }
      }
    }
}

注意：因为你是在AngularJS上下文外（d3的点击事件）修改作用域变量，所以需要用$apply()触发脏检查，让视图更新生效。

方案2：局部重载stepper DOM（符合你提到的局部刷新思路） #

如果不想操作Angular作用域，可以在切换节点时重新渲染对应stepper的HTML，触发ng-init重新执行自动重置状态，操作步骤如下：

1. 页面加载完成后缓存两个stepper的原始HTML：

let stepper2OriginHtml, stepper3OriginHtml;
window.onload = function() {
  stepper2OriginHtml = document.getElementById('stepperTwoLabs').innerHTML;
  stepper3OriginHtml = document.getElementById('stepperThreeLabs').innerHTML;
}

2. 在click函数显示对应stepper前，先重置HTML：

// 2个实验的场景下加入这行
document.getElementById('stepperTwoLabs').innerHTML = stepper2OriginHtml;
// 3个实验的场景下加入这行
document.getElementById('stepperThreeLabs').innerHTML = stepper3OriginHtml;

两种方案都可以实现每次点击节点后stepper从第一步开始运行，优先选择方案1，不会触发DOM重绘，性能更好。

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