Angular ngDialog не отображает данные модели в $scope
Постоянно возникают проблемы с нг-диалогом, корректно отображающим данные модели. Мое приложение использует два экземпляра ng-dialog, один для добавления данных (в данном случае для Лиги) и второй диалог для редактирования данных. Оба используют одни и те же данные ng-модели. Когда выбран пункт Добавить лигу, появляется первое диалоговое окно, пользователь заполняет поля и сохраняет запись, диалоговое окно закрывается, и на главной странице отображается созданная Лига вместе с ее данными. Кнопка EDIT представлена.
Проблема в этом случае возникает при нажатии кнопки EDIT.
Вызывается метод контроллера 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" });
};
....
}])
;
Я регистрирую содержимое $ scope.leagueForm до открытия ng-диалога, и содержимое данных корректно. Однако, когда открывается диалоговое окно, все поля пусты.
Это должно быть довольно прямое связывание данных, поэтому я должен делать что-то не так.
Вот содержимое файла editLeague.html, который используется для создания ng-диалога:
<div class="ngdialog-message">
<div>
<h3>Edit League</h3>
</div>
<div> </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> </div>
</div>
2 ответа
Решено. Все было очень просто. Просто нужно удалить пустое определение
$scope.leagueForm = {
name: '',
shortname: '',
minAgeGroup: null,
maxAgeGroup: null,
type: null,
rescheduleDays: '',
consequence: '',
fine: '',
logoURL: '',
leagueId: ''
};
от контроллера. Затем укажите ссылку на leagueForm.name и т. Д. В качестве ng-модели в диалоговом окне Добавить, и, наконец, моя функция $scope.openEditLeague работает так, как указано в исходном сообщении.
Я думаю, что это может быть связано с тем, что вы передаете controller значение как HomeController - который переписывает leagueForm значение (для пустых значений) в $scope как это раскрутилось.