2017-02-26 58 views
0

不斷遇到問題與NG-對話框正確顯示模型數據顯示模型數據。我的應用程序使用兩個ng對話框實例,一個用於添加數據(在這種情況下用於聯盟)和第二個用於編輯數據的對話框。兩者都使用相同的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("\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對話框之前記錄了$ scope.leagueForm的內容,並且數據內容是正確的。 然而,當對話框打開時,所有字段都是空的。
這應該是相當簡單的數據綁定,所以我必須做一些錯誤的。

這裏是用來生成NG-對話框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> 

回答

0

解決。畢竟是非常簡單的。只是需要從控制器中刪除的

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

空的定義。然後引用leagueForm.name等,作爲添加對話框中的ng模型,最後我的$ scope.openEditLeague函數按照原始文章中指定的那樣工作。

0

我認爲這可能是由於您傳遞controllerHomeController - 這是覆蓋leagueForm值(空值)在$scope中,因爲它在啓動。

+0

你會提出什麼樣的替代方案?對話必須有一個控制器,不是嗎? –