Angular ngDialog 未在 $scope 中显示模型数据

Question

ng-dialog 正确显示模型数据一直存在问题。我的应用程序使用两个 ng-dialog 实例，一个用于添加数据（在本例中用于联赛），第二个对话框用于编辑数据。两者都使用相同的 ng-model 数据。选择添加联盟时，会弹出第一个对话框，用户填充字段并保存记录，对话框关闭，主页显示创建的联盟及其数据。出现一个“编辑”按钮。
当按下“编辑”按钮时会出现这种情况。

控制器的 openEditLeague 方法被调用，它使用我要编辑的联赛的数据预填充 leagueForm。

'use strict';

angular.module('ma-app')
    .filter('trustUrl', function ($sce) {
        return function(url) {
            return $sce.trustAsResourceUrl(url);
        };
    })
    .controller('HomeController', ['$scope', 'ngDialog', 'authService', 'coreDataService', 'userService', '$rootScope', 'clubService', 'schedulingService', function($scope, ngDialog, authService, coreDataService, userService, $rootScope, clubService, schedulingService) {

        ....

        $scope.leagueForm = {
            name: '',
            shortname: '',
            minAgeGroup: null,
            maxAgeGroup: null,
            type: null,
            rescheduleDays: '',
            consequence: '',
            fine: '',
            logoURL: '',
            leagueId: ''
        };

        ....

        $scope.openEditLeague = function(league) {
            console.log("\n\nOpening dialog to edit league");
            console.log(league);

            $scope.leagueForm = {
                name: league.name,
                shortname: league.short_name,
                minAgeGroup: league.min_age_group,
                maxAgeGroup: league.max_age_group,
                type: league.type,
                rescheduleDays: league.reschedule_time,
                consequence: league.reschedule_consequence,
                fine: league.reschedule_fine,
                logoURL: league.logo_url
            };

            console.log("Current entries include: ");
            console.log($scope.leagueForm);
            ngDialog.open({ template: 'views/editLeague.html', scope: $scope, className: 'ngdialog-theme-default custom-width-600', controller:"HomeController" });
        };

        ....

    }])
;

我在打开 ng-dialog 之前记录了 $scope.leagueForm 的内容，并且数据内容是正确的。但是，当对话框打开时，所有字段都是空的。
这应该是相当直接的数据绑定，所以我一定做错了什么。

以下是用于生成 ng-dialog 的 editLeague.html 的内容：

<div class="ngdialog-message">
    <div>
        <h3>Edit League</h3>
    </div>
    <div>&nbsp;</div>
    <div>
        <form class="form-horizontal" ng-submit="editLeague()">
            <div class="form-group">
                <label class="sr-only" for="name">League Name</label>
                <div class="col-xs-12 col-sm-6">
                    <input type="text" class="form-control" id="name" placeholder="league name" ng-model="leagueForm.name">
                </div>
                <label class="sr-only" for="shortname">League Abbreviation</label>
                <div class="col-xs-12 col-sm-6">
                    <input type="text" class="form-control" id="shortname" placeholder="league abbreviation" ng-model="leagueForm.shortname">
                </div>
            </div>

            <div class="form-group">
                <label class="sr-only" for="minage">Minimum Age Group</label>
                <div class="col-xs-12 col-sm-6">
                    <div class="input-group">
                        <div class="input-group-addon">Min Age Group</div>
                        <select id="minage" class="form-control" ng-model="leagueForm.minAgeGroup" ng-options="ageGroup as ageGroup.name for ageGroup in ageGroups"></select>
                    </div>
                </div>
                <label class="sr-only" for="maxage">Maximum Age Group</label>
                <div class="col-xs-12 col-sm-6">
                    <div class="input-group">
                        <div class="input-group-addon">Max Age Group</div>
                        <select id="maxage" class="form-control" ng-model="leagueForm.maxAgeGroup" ng-options="ageGroup as ageGroup.name for ageGroup in ageGroups"></select>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="sr-only" for="type">League Type</label>
                <div class="col-xs-12 col-sm-6">
                    <div class="input-group">
                        <div class="input-group-addon">Type</div>
                        <select id="type" class="form-control" ng-model="leagueForm.type" ng-options="leagueType as leagueType.name for leagueType in leagueTypes"></select>
                    </div>
                </div>
                <label class="sr-only" for="days">Day to Reschedule</label>
                <div class="col-xs-12 col-sm-6">
                    <div class="input-group">
                        <input type="text" class="form-control" id="days" placeholder="days to reschedule" ng-model="leagueForm.rescheduleDays">                        
                        <div class="input-group-addon">Days</div>
                    </div>                    
                </div>
            </div>

            <div class="form-group">
                <label class="sr-only" for="consequence">Missed Reschedule Date Consequence</label>
                <div class="col-xs-12 col-sm-6">
                    <div class="input-group">
                        <div class="input-group-addon">Consequence</div>
                        <select id="consequence" class="form-control" ng-model="leagueForm.consequence">
                            <option value =""></option>
                            <option value="NONE">N/A</option>
                            <option value="FORFEIT">Forfeit</option>
                            <option value="FINE">Fine</option>
                        </select>
                    </div>
                </div>                
                <div class="col-xs-12 col-sm-6">
                    <div class="input-group" ng-show="!fineHidden">
                        <label class="sr-only" for="fine">Fine</label>
                        <div class="input-group-addon">$</div>
                        <input type="text" class="form-control" id="fine" placeholder="fine" ng-model="leagueForm.fine">
                        <div class="input-group-addon">.00</div>
                    </div>                    
                </div>
            </div>

            <button type="submit" class="btn btn-info">Update</button>
            <button type="button" class="btn btn-default" ng-click=closeThisDialog("Cancel")>Cancel</button>
        </form>
    </div>
    <div>&nbsp;</div>
</div>

Answer 1

我认为这可能是因为您将 controller 值作为 HomeController 传递 - 这会覆盖 $scope 中的 leagueForm 值（为空值）因为它正在旋转。

Answer 2

已解决。毕竟很简单。只需要删除

的空定义

$scope.leagueForm = {
            name: '',
            shortname: '',
            minAgeGroup: null,
            maxAgeGroup: null,
            type: null,
            rescheduleDays: '',
            consequence: '',
            fine: '',
            logoURL: '',
            leagueId: ''
        };

来自控制器。然后在添加对话框中引用 leagueForm.name 等作为 ng-model，最后我的 $scope.openEditLeague 函数按照原始 post.

中指定的方式工作

Angular ngDialog 未在 $scope 中显示模型数据

Angular ngDialog not Displaying model data in $scope

angularjs

ng-dialog