点击HTML页面图谱节点后步进器无法重置为初始步骤问题求助

你使用的是AngularJS Material的步进器组件，步进器的当前步骤、步骤禁用/完成状态都绑定在控制器作用域变量上，不需要做页面局部刷新，直接在节点点击事件的处理逻辑里重置对应状态变量即可，修改后的click函数代码如下：

var click = function (d){
  document.getElementById('stepperTwoLabs').style.display='none';
  document.getElementById('stepperThreeLabs').style.display='none';

  // 新增：先重置两个步进器的所有状态，避免之前的状态残留
  // 如果你是用$scope挂载变量，就把下面的vm换成$scope
  // 重置2实验步进器状态
  vm.selected = 0;
  vm.step1 = {completed: false};
  vm.step2 = {disabled: true, completed: false};
  vm.step3 = {disabled: true, completed: false};
  // 重置3实验步进器状态
  vm.step4 = {disabled: true, completed: false};

  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) {
        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) {
        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);
          }
      }
    }
}

如果你的逻辑里拿不到控制器的vm或者$scope对象，可以通过DOM元素获取对应的作用域来修改状态，示例如下：

// 获取2实验步进器的作用域
var scope2 = angular.element(document.querySelector('#stepperTwoLabs md-steppers')).scope();
scope2.selected = 0;
scope2.step2.disabled = true;
scope2.step3.disabled = true;
scope2.step1.completed = false;
scope2.step2.completed = false;
scope2.step3.completed = false;
scope2.$apply(); // 触发视图更新

// 获取3实验步进器的作用域
var scope3 = angular.element(document.querySelector('#stepperThreeLabs md-steppers')).scope();
scope3.selected = 0;
scope3.step2.disabled = true;
scope3.step3.disabled = true;
scope3.step4.disabled = true;
scope3.step1.completed = false;
scope3.step2.completed = false;
scope3.step3.completed = false;
scope3.step4.completed = false;
scope3.$apply();

修改后每次点击节点，都会先把步进器的状态重置为初始值，再加载对应实验，步进器就会默认停留在第一步。

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