Angular UI Modal 2 Way Binding Not Working
Solution 1:
Change:
<input type = "text" ng-model= "ngModel" / >
Into:
<input type = "text" ng-model= "$parent.ngModel" / >
This has to do with transclusion. Check: https://github.com/angular-ui/bootstrap/issues/969
Solution 2:
I think you're under the impression that ng-model="textbox.sample"
in the parent and ng-model="ngModel"
in the modal are the same because you are passing textbox.sample
to the modal and you're able to see the correct value in the modal window. The only reason this is working is because you're explicitly setting the $scope.ngModel
property every time to modal window opens.
One way to make this work how you expect is to just use the $scope.textbox.sample
property in both places, but I wouldn't recommend that.
Perhaps the proper way would be to use the modalInstance.result
promise, something like this:
Create a button on the modal and make it's ng-click="ok()"
$scope.ok = function () {
$modalInstance.close($scope.ngModal); // will return this to the modalInstance.result
}
And then in the parent controller, or whatever opens the 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
});
modalInstance.result.then(function (result) {
$scope.textbox.sample = result;
});
};
Solution 3:
For me none of the above worked.
Instead I had to do like was suggested in this comment in github.
The variable to be binded to must be an object, not only a simple value.
For example, if $scope.value
does not work, it will work if you use $scope.someObject.value
.
Post a Comment for "Angular UI Modal 2 Way Binding Not Working"