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

Я добавляю 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;

};

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

Ответы

Ответ 1

Я думаю, что у вас создается впечатление, что 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;
    });
};

Ответ 2

Изменить:

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

В:

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

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

Ответ 3

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

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

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

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