d3.js节点点击时ng-include加载相同HTML不重置stepper步骤问题求解

根因说明 #

ng-include 指令默认仅在模板路径发生变化时才会重新渲染DOM，当两次点击的节点子节点数量一致时，模板路径不变，已有DOM会被复用，因此步骤条的交互状态（比如当前激活的步骤序号）不会被重置。另外你代码中click函数内的$(document).ready()属于冗余逻辑，点击事件触发时页面DOM早已加载完成，可直接删除。

可行方案 #

方案1：通过ng-if强制重建DOM（改造成本最低） #

通过临时销毁承载ng-include的DOM节点再重建，触发模板重新渲染，步骤条会自动恢复初始状态。

1. 修改HTML代码：

<div ng-if="ctrl.stepperVisible" ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.html' || 'views/stepper-three-labs.html'"></div>

2. 修改JS逻辑，注意需要先在控制器中注入$timeout服务：

// 控制器初始化时设置初始值
vm.stepperVisible = true;

var click = function (d){
    vm.numlab = d.children.length;
    // 先隐藏销毁DOM
    vm.stepperVisible = false;
    // 等待Angular脏检查完成后再渲染，触发模板重加载
    $timeout(function(){
        vm.stepperVisible = true;
        // 执行iframe src更新逻辑
        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);
        }
    }, 0);
}

方案2：手动重置步骤条状态（性能最优，推荐） #

不需要重新加载模板，直接在点击节点时主动重置步骤条的状态值，性能开销最小。

• 如果步骤条状态由Angular变量控制，比如当前步骤存在vm.currentStep，直接在click函数开头重置：

var click = function (d){
    // 重置步骤条到第一步
    vm.currentStep = 1;
    // 原有其他逻辑
    vm.numlab = d.children.length;
    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);
    }
}

• 如果步骤条是jQuery控制的样式，直接重置类名即可：

var click = function (d){
    // 假设步骤项的类名为.step-item，重置激活状态到第一个步骤
    $('.step-item').removeClass('active').eq(0).addClass('active');
    // 原有其他逻辑
    vm.numlab = d.children.length;
    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);
    }
}

方案3：给模板路径加随机参数强制刷新 #

通过给模板路径追加动态时间戳参数，让ng-include判定为新模板触发重加载。

1. 修改HTML代码：

<div ng-include="(ctrl.numlab==2 ? 'views/stepper-two-labs.html' : 'views/stepper-three-labs.html') + '?t=' + ctrl.refreshTimestamp"></div>

2. 修改JS逻辑：

var click = function (d){
    vm.numlab = d.children.length;
    // 生成新的时间戳触发模板重加载
    vm.refreshTimestamp = Date.now();
    // 等待模板加载完成后更新iframe
    setTimeout(function(){
        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);
        }
    }, 100);
}

该方案会产生多余的模板缓存，非特殊情况不推荐使用。

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