Connessione UI modale a 2 vie non funzionante

Question

Aggiungo un Modular UI angolare dove sto passando l'ambito alla finestra modale per il binding a 2 vie. Ho usato il metodo resolve per passare il valore dell'ambito. Questo funziona in un certo senso quando il valore del modello ng cambia in genitore, riflette all'interno della finestra modale. Tuttavia, se il valore cambia all'interno della finestra modale, non si riflette nel modello gen ng. Ecco il mio codice:

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; 

}; 

Perché isint il modo 2 legame tra genitore e l'istanza modali non funziona nel codice sopra?

Answer 1

penso che tu sia sotto l'impressione che ng-model="textbox.sample" nel genitore e nel ng-model="ngModel" modale sono le stesse, perché si sta passando textbox.sample al modale e tu sei in grado di vedere il valore corretto nella finestra modale . L'unica ragione per cui questo funziona è che si imposta esplicitamente la proprietà $scope.ngModel ogni volta che si apre la finestra modale.

Un modo per rendere questo lavoro come ci si aspetta è utilizzare la proprietà $scope.textbox.sample in entrambi i posti, ma non la consiglierei.

Forse il modo corretto sarebbe quello di utilizzare il modalInstance.result promessa, qualcosa di simile:

Creare un pulsante sul modale e fanno è ng-click="ok()"

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

E poi nel controller genitore, o qualsiasi altra cosa apre la finestra modale:

$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

Cambio:

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

Into:

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

Questo ha a che fare con inclusione. Controllare: https://github.com/angular-ui/bootstrap/issues/969

Answer 3

Per me nessuna delle precedenti ha funzionato.

Invece ho dovuto fare come è stato suggerito in this comment in github.

La variabile da associare a deve essere un oggetto, non solo un valore semplice.

Ad esempio, se $scope.value non funziona, funzionerà se si utilizza $scope.someObject.value.