Angular UI模式2路绑定不起作用

Question

我正在添加一个Angular UI Modal,我将范围传递给Modal Window以进行双向绑定.我使用该resolve方法传递范围值.这样做有点工作意味着当父模型中的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;

};

为什么父元素和模态实例之间的双向绑定在上面的代码中不起作用？

Answer 1

更改:

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

成:

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

这与翻译有关.检查:https://github.com/angular-ui/bootstrap/issues/969

Answer 2

我认为你的印象是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;
    });
};