angularjsダイアログフォームのデータが範囲を更新しない

Question

顧客の住所情報を編集するための角度のある素材ダイアログを開く小さなアプリを作成しています。現在ダイアログが開き、既存のアドレス情報が表示されます。ダイアログのデータを編集して送信すると、データベースが更新されます。ただし、ページ上のアドレス情報は更新されません。

データベースの更新後、ページのAdd1とAdd2が新しい情報に更新されます。私はこれを行う方法を把握することはできません助けてください？

ユーザーがアドレスを入力しているときにメインページが更新されるのを避けたいのは、exec関数が完了したときだけです。

HTML：

 <div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp"> 


      <div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center"> 
      <p>Add1: {{ customerdetails.Add1 }}</p> 
      <p>Add2: {{ customerdetails.Add2 }}</p> 
      <br/> 
      <md-button class="md-primary md-raised" ng-click="showTabDialog($event)"> 
       Open Dialog 
      </md-button> 
      </div> 


      <script type="text/ng-template" id="tabDialog.tmpl.html"><md-dialog aria-label="Mango (Fruit)"> 
      <form> 
      <md-toolbar> 
       <div class="md-toolbar-tools"> 

       <span flex></span> 
       <md-button class="md-icon-button" ng-click="cancel()"> 
        <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon> 
       </md-button> 
       </div> 
      </md-toolbar> 
      <md-dialog-content style="max-width:800px;max-height:810px; "> 
       <md-tabs md-dynamic-height md-border-bottom> 
       <md-tab label="one"> 
        <md-content class="md-padding"> 
        <md-input-container class="md-block"> 
        <label>Address 1</label> 
         <input ng-model="customerdetails.Add1"> 
        </md-input-container> 
        <md-input-container class="md-block"> 
         <label>Address 2</label> 
         <input ng-model="customerdetails.Add2"> 
        </md-input-container> 
        </md-content> 
       </md-tab> 

       </md-tabs> 
      </md-dialog-content> 

      <md-dialog-actions layout="row"> 
       <md-button ng-click="editAddressSubmit()" style="margin-right:20px;" > 
       Update 
       </md-button> 
      </md-dialog-actions> 
      </form> 
     </md-dialog> 
     </script> 
     </div> 

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 

     .controller('AppCtrl', function($scope, $mdDialog, $mdMedia) { 
      $scope.customerdetails={ 
      Add1: 'line 1', 
      Add2: 'line 2' 
      } 

      $scope.showTabDialog = function(ev) { 
      $mdDialog.show({ 
       controller: 'AppCtrl', 
       templateUrl: 'tabDialog.tmpl.html', 
       parent: angular.element(document.body), 
       targetEvent: ev, 
       clickOutsideToClose:true 
      }) 

      }; 

      $scope.cancel = function() { 
      $mdDialog.cancel(); 
      }; 

      $scope.editAddressSubmit = function() { 
      console.log('edit address submit funtion clicked') 
      //in live code the database is updated here but the Add1 and Add2 is not updated on the main page once the dialog is closed! 
      return $scope.exec('call/UpdateCustomerSQL', 
       { 
        Add1: $scope.customerdetails.Add1, 
        Add2: $scope.customerdetails.Add2 
       } 
      ).then(function() { // close popup 
       console.log('then function close popup') 
       $mdDialog.cancel(); 
       }) 
      } 
     }) //close controller 

Answer 1

トリックは、あなたのダイアログのスコープは、あなたの親スコープにバインドさを取得しないように孤立scopeに合格しなければならないことです。このためには、パラメータlocalを使用し、別のコントローラを使用してロジックを処理する必要があります。

$mdDialog.show({ 
    controller: 'DialogCtrl', 
    templateUrl: 'tabDialog.tmpl.html', 
    parent: angular.element(document.body), 
    targetEvent: ev, 
    clickOutsideToClose: true, 
    locals: { 
    address1: $scope.customerdetails.Add1, 
    address2: $scope.customerdetails.Add2, 
    } 
}) 

そして、あなたはダイアログで必要とされるものは何でもロジックを処理するために別のコントローラDialogCtrlを使用します。ここではaddress1とaddress2をこの行に沿ってコントローラに注入できます。

.controller('DialogCtrl',function($scope,$mdDialog, address1, address2){ 
    console.log(address1, address2) //this will have the values as $scope.customerdetails.Add1 and 2 
} 

は今、あなたはあなたのAppCtrlからごDialogCtrlにデータを成功裏に合格している、あなたは、あなたのDBのtranscationsを行うことができます。その後、AppCtrlが更新されたデータを取得できるように、約束を解決する必要があります。

私はあなたのペンをフォーク：http://codepen.io/cozyazure/pen/PzYzQd

私はあなたのサービスを持っていなかったので、私は約束のリターン・