角度 ngDialog 不以$scope显示模型数据



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

控制器的 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("nnOpening 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 对话框之前记录了 $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>

我认为这可能是由于您将controller值作为HomeController传递 - 这是在$scope中覆盖leagueForm值(空值)因为它被旋转。

已解决。 毕竟很简单。 只需要删除空的定义

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

从控制器。 然后在"添加"对话框中引用 leagueForm.name 等作为ng-model,最后我的$scope.openEditLeague函数按照原始帖子中指定的方式工作。

最新更新