Angular.js $mdDialog控制器递归调用后选中行数据无法渲染问题

问题原因排查 #

你代码存在两个核心问题：

• 低级拼写错误：HTML中下一步按钮的事件绑定写为nrh-click，正确应为ng-click，会直接导致点击事件不触发，逻辑无法执行。
• 逻辑设计问题：每次点击下一步都重复新建弹窗，未关闭原有弹窗导致堆叠，且传递参数时带入了旧的aaa属性，覆盖了新控制器的赋值逻辑，同时preserveScope: true会导致作用域污染，引发渲染异常。
• 你查阅到的broadcast方案属于跨作用域通信方案，当前需求完全不需要用到，采用更简单的逻辑即可解决。

最优解决方案：复用单弹窗，直接更新数据 #

不需要每次新建弹窗，同一个弹窗内直接更新绑定数据即可，双向绑定会自动刷新视图，逻辑更简洁性能更好。

修改后的控制器代码 #

function popupController($mdDialog, locals) {
    var dp = this;
    // 初始化参数，单独赋值避免旧值干扰
    dp.aaas = locals.aaas;
    dp.order = locals.order;
    dp.title = locals.title;
    dp.aaa = dp.aaas[dp.order];

    dp.hideDialog = function () {
        return $mdDialog.hide();
    };

    dp.cancelDialog = function () {
        return $mdDialog.cancel();
    };

    dp.nextFunctionPopup = function () {
        // 边界判断，避免数组越界
        if (dp.order + 1 >= dp.aaas.length) return;
        // 直接更新索引和对应数据，视图自动渲染
        dp.order++;
        dp.aaa = dp.aaas[dp.order];
    };

    // 可选：添加上一步逻辑
    dp.prevFunctionPopup = function () {
        if (dp.order - 1 < 0) return;
        dp.order--;
        dp.aaa = dp.aaas[dp.order];
    };
}

修改后的HTML按钮部分代码 #

<md-dialog-actions layout="row" layout-align="end center">
    <!-- 修复点击事件拼写错误，添加按钮文字，加禁用逻辑 -->
    <md-button ng-if="dp.aaas.length > 1" class="md-raised md-primary"
        ng-click="dp.prevFunctionPopup()" ng-disabled="dp.order === 0">
        上一步
    </md-button>
    <md-button ng-if="dp.aaas.length > 1" class="md-raised md-primary"
        ng-click="dp.nextFunctionPopup()" ng-disabled="dp.order === dp.aaas.length - 1">
        下一步
    </md-button>
    <md-button ng-click="dp.hideDialog()" class="md-raised">
        关闭
    </md-button>
</md-dialog-actions>

如果你坚持要使用多弹窗切换的原有逻辑，按以下修改即可 #

修复后的控制器代码 #

function popupController($mdDialog, locals) {
    var dp = this;
    dp.aaas = locals.aaas;
    dp.order = locals.order;
    dp.title = locals.title;
    dp.aaa = dp.aaas[dp.order];

    dp.hideDialog = function () {
        return $mdDialog.hide();
    };

    dp.cancelDialog = function () {
        return $mdDialog.cancel();
    };

    dp.nextFunctionPopup = function () {
        var index = dp.aaas.findIndex(aaa => aaa.id === dp.aaa.id);
        var nextOrder = index + 1;
        if (nextOrder >= dp.aaas.length) return;
        // 先关闭当前弹窗，再打开新弹窗，避免堆叠
        $mdDialog.hide().then(() => {
            $mdDialog.show({
                bindToController: true,
                preserveScope: false, // 关闭旧作用域继承，避免污染
                ariaLabel: 'AAAAAA',
                templateUrl: 'aaa-popup.html',
                controller: 'popupController',
                controllerAs: 'dp',
                // 只传必要参数，不带旧的aaa属性
                locals: {
                    aaas: dp.aaas,
                    order: nextOrder,
                    title: dp.title
                }
            });
        });
    };
}

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