angularjs dialog form data nicht update scope

Question

Ich erstelle eine kleine App, wo ich einen eckigen Materialdialog öffne, um Kundenadressinformationen zu bearbeiten. Momentan öffnet sich der Dialog und zeigt die vorhandenen Adressinformationen an. Wenn die Daten im Dialog bearbeitet und übergeben werden, wird die Datenbank aktualisiert. Die Adressinformationen auf der Seite werden jedoch nicht aktualisiert.

Die Add1 und Add2 auf der Seite sollten auf die neuen Informationen aktualisiert werden, nachdem die Datenbank aktualisiert wurde. Ich kann nicht herausfinden, wie das geht bitte helfen?

Ich möchte nicht die Hauptseite aktualisieren, wie der Benutzer die Adresse eingibt, nur wenn die Exec-Funktion abgeschlossen ist.

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

Der Trick ist, dass Sie in einer isolierten scope passieren müssen werden, so dass Ihr Anwendungsbereich des Dialogs wird nicht zu Ihrem übergeordneten Bereich binded erhalten. Dazu müssen Sie die Parameter local verwenden und einen anderen Controller verwenden, um die Logik zu verarbeiten.

$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, 
    } 
}) 

Und dann werden Sie einen anderen Controller verwenden DialogCtrl was Logik zu behandeln, die im Dialog benötigt wird. Hier können Sie address1 und address2 in Ihren Controller einspeisen, etwas entlang dieser Linie.

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

Jetzt haben Sie erfolgreich die Daten von Ihrem AppCtrl zu Ihrem DialogCtrl Sie dann Ihre DB transcations ausführen können. Danach müssen Sie die Versprechen lösen, damit Ihre AppCtrl die aktualisierten Daten erhalten kann.

ich Ihren Stift gegabelt: http://codepen.io/cozyazure/pen/PzYzQd

Ich habe nicht Ihren Dienst, so verspottete ich eine $timeout ein Versprechen Rückkehr