Angular UI Modal 2-Way Binding не работает

148
20

Я добавляю Angular UI Modal, где я передаю область действия в Модальное окно для двухсторонней привязки. Я использовал метод resolve для передачи значения области. Выполнение такого рода работ приводит к тому, что значение ng-model изменяется в родительском, оно отражается внутри модального окна. Однако, если значение изменяется внутри модального окна, оно не отражается в родительской ng-модели. Вот мой код:


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>


Контроллер:


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;

};


Почему нет двухсторонней привязки между родительским и модальным экземпляром, не работающим в указанном выше коде?

спросил(а) 2021-01-25T18:01:27+03:00 4 месяца, 4 недели назад
1
Решение
149

Изменить:


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

В:

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

Это связано с переходом. Проверьте: https://github.com/angular-ui/bootstrap/issues/969

ответил(а) 2021-01-25T18:01:27+03:00 4 месяца, 4 недели назад
117

Я думаю, что у вас создается впечатление, что ng-model="textbox.sample" в родительском и ng-model="ngModel" в модальном формате одинаковы, потому что вы передаете textbox.sample в модальный, и вы можете видеть правильное значение в модальное окно. Единственная причина, по которой это работает, заключается в том, что вы явно устанавливаете свойство $scope.ngModel каждый раз, когда открывается модальное окно.


Один из способов сделать эту работу, как вы ожидаете, - просто использовать свойство $scope.textbox.sample в обоих местах, но я бы не рекомендовал этого.


Возможно, правильным способом было бы использовать обещание modalInstance.result, что-то вроде этого:


Создайте кнопку на модальном и сделайте ее ng-click="ok()"

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

И затем в родительском контроллере или независимо от того, что открывает модальное окно:


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

ответил(а) 2021-01-25T18:01:27+03:00 4 месяца, 4 недели назад
63

Для меня ничего из этого не было.


Вместо этого мне пришлось сделать, как было предложено в этот комментарий в github.


Переменная, которая должна быть привязана к объекту, должна быть объектом, а не только простым значением.


Например, если $scope.value не работает, он будет работать, если вы используете $scope.someObject.value.

ответил(а) 2021-01-25T18:01:27+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема