Angular UI Modale 2-Wege-Bindung funktioniert nicht

Question

Ich füge ein Angular UI Modal hinzu, wo ich den Scope durch das Modal Window für 2-Wege-Bindung führe. Ich habe die Methode resolve verwendet, um den Wert des Bereichs zu übergeben. Dies funktioniert, wenn der ng-Modellwert sich im Parent ändert und im modalen Fenster reflektiert wird. Wenn sich der Wert jedoch innerhalb des modalen Fensters ändert, spiegelt er sich nicht im übergeordneten ng-Modell wider. Hier ist mein Code:

HTML:

<div ng-app="app"> 
    <div ng-controller="ParentController"> 
     <br /> 
     <input type="text" ng-model="textbox.sample" /> 
     <a class="btn btn-default" ng-click="open(textbox.sample)">Click Me</a> 

     <script type="text/ng-template" id="ModalContent.html"> 
      <input type = "text" ng-model= "ngModel"/> 
     </script> 


     <br />{{ textbox }}   
    </div> 
</div> 

Controller:

var app = angular.module('app', ['ui.bootstrap']); 

app.controller('ParentController', function ($scope, $modal) { 

    $scope.textbox = {}; 

    // MODAL WINDOW 
    $scope.open = function (_ngModel) { // The ngModel is passed from open() function in template 
     var modalInstance = $modal.open({ 
      templateUrl: 'ModalContent.html', 
      controller: ModalInstanceCtrl, 
      resolve: { 
       ngModel: function() { 
        return _ngModel; 
       } 
      } // end resolve 
     }); 
    }; 
}); 

var ModalInstanceCtrl = function ($scope, $modalInstance, ngModel) { 
    $scope.ngModel = ngModel; 

}; 

Warum iSINT die 2-Wege-Bindung zwischen Eltern und modal Instanz nicht in dem obigen Code zu arbeiten?

Answer 1

Ich denke, man den Eindruck hat, dass ng-model="textbox.sample" in den Eltern und ng-model="ngModel" im Modal gleich sind, weil Sie textbox.sample zum modalen sind vorbei und Sie sind in der Lage den richtigen Wert in dem modalen Fenster zu sehen . Der einzige Grund dafür ist, dass Sie die Eigenschaft $scope.ngModel bei jedem Öffnen des modalen Fensters explizit festlegen.

Eine Möglichkeit, dies zu tun, wie Sie erwarten, ist nur die $scope.textbox.sample Eigenschaft an beiden Orten zu verwenden, aber ich würde das nicht empfehlen.

Vielleicht ist der richtige Weg, um die modalInstance.result Versprechen, etwas zu verwenden wäre:

Erstellen Sie eine Schaltfläche auf den Modal und machen es ng-click="ok()"

$scope.ok = function() { 
    $modalInstance.close($scope.ngModal); // will return this to the modalInstance.result 
} 

ist und dann in der übergeordneten Steuerung, oder was auch immer öffnet das modale Fenster:

$scope.open = function (_ngModel) { // The ngModel is passed from open() function in template 
    var modalInstance = $modal.open({ 
     templateUrl: 'ModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
      ngModel: function() { 
       return _ngModel; 
      } 
     } // end resolve 
    }); 

    modalInstance.result.then(function (result) { 
     $scope.textbox.sample = result; 
    }); 
}; 

Answer 2

Wechsel:

<input type = "text" ng-model= "ngModel"/> 

In:

<input type = "text" ng-model= "$parent.ngModel"/> 

Das hat mit Einbindung zu tun. Check: https://github.com/angular-ui/bootstrap/issues/969

Answer 3

Für mich keiner der oben genannten funktioniert.

Stattdessen musste ich tun, wie in this comment in github vorgeschlagen wurde.

Die Variable, die gebunden werden soll, muss ein Objekt sein, nicht nur ein einfacher Wert.

Zum Beispiel, wenn $scope.value nicht funktioniert, wird es funktionieren, wenn Sie $scope.someObject.value verwenden.