Question

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

调用控制器的openEditLeague方法，该方法使用我正在尝试编辑的联盟的数据预填充联盟表格。

'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 - 这会覆盖leagueForm中的$scope值（为空值）旋转起来。

Answer 2

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

的空定义

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

来自控制器。然后在add对话框中引用leagueForm.name等作为ng-model，最后我的$ scope.openEditLeague函数在原始帖子中指定。

Angular ngDialog不显示$ scope中的模型数据

2 个答案: