Angular.js：递归调用 $mdDialog 控制器答案

【问题标题】：Angular.js : recursive call to an $mdDialog controllerAngular.js：递归调用 $mdDialog 控制器
【发布时间】：2021-12-18 16:55:00
【问题描述】：

我有一个网格，例如，当我选择两个元素时，当我单击编辑时，我想显示一个弹出窗口，然后使用上一个和 nexi 按钮，我想在两个弹出窗口之间导航，以选择 2 个元素，现在，我说的是 2 个弹出窗口，但它可能更多取决于所选元素，所以我实施了解决方案，第一个弹出窗口显示得很好，第一行的值被选中，但是当我点击下一步显示下一个时，第二行的值不会被渲染。我不知道是什么问题。我在某处读到可能需要使用广播但我不知道如何使用。

mdDialog 控制器

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

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

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

        function nextFunctionPopup() {
            
            var index = dp.aaas.findIndex(aaa => aaa.id === dp.aaa.id);
            dp.order = index + 1;
            
            $mdDialog.show({
                bindToController: true,
                preserveScope: true,
                ariaLabel: 'AAAAAA',
                templateUrl: 'aaa-popup.html',
                controller: 'popupController',
                controllerAs: 'dp',
                locals: dp
            });
        }

    }

html

<md-dialog aria-label="{{dp.title}}" flex="50">
    <md-toolbar class="md-toolbar-tools">
        <h2>{{dp.title}}</h2><span flex></span>
        <md-button class="md-icon-button" ng-click="dp.hideDialog()">
            <md-icon aria-label="Close dialog">close</md-icon>
        </md-button>
    </md-toolbar>
    <md-dialog-content>
        <md-content layout-padding>
            <form name="dp.aaaForm">
                <div layout="row" layout-xs="column">
                    <md-input-container class="md-block" flex="50" style="margin-top: 18px;">
                        <label>ID</label>
                        <input type="text" name="matricule" ng-model="dp.aaa.id" ng-readonly="true" numbers-Only ng-disabled="true">
                    </md-input-container>
                </div>
                <div layout="row" layout-xs="column">
                    <md-input-container class="md-block" flex style="margin-top: 18px;">
                        <label>Full name</label>
                        <input name="name" ng-model="dp.aaa.nom" ng-readonly="true" ng-disabled="true">
                    </md-input-container>
                    <md-input-container class="md-block" flex style="margin-top: 18px;">
                        <label>Name</label>
                        <input name="bbb" ng-model="dp.aaa.prenom" ng-readonly="true" ng-disabled="true">
                    </md-input-container>
                </div>
            </form>
        </md-content>
    </md-dialog-content>
    <md-dialog-actions layout="row" layout-align="end center">
        <button ng-if="dp.listIDs !== undefined" ng-hide="dp.listHide" action="next" class="md-raised md-primary"
        nrh-click="dp.nextFunctionPopup()" ng-disabled="" type="submit"></button>
    </md-dialog-actions>
</md-dialog>

【问题讨论】：

标签： javascript angularjs angular-material mddialog

【解决方案1】：

我终于想通了，我不需要在下一个函数中调用 mdDialog。由于 angular.js 使用自动绑定，我不能直接使用对象

function nextFunctionPopup() {
            
    var index = dp.aaas.findIndex(aaa => aaa.id === dp.aaa.id);
    dp.order = index + 1;
    dp.aaa = dp.aaas[dp.order];
}

【讨论】：