javascript - Angular UI Modal 2方式绑定(bind)不起作用

Question

我正在添加一个 Angular UI 模态，我将范围传递到模态窗口以进行 2 种方式绑定(bind)。我使用 resolve 方法来传递范围值。这样做的工作方式意味着当父级中的 ng-model 值发生变化时，它会反射(reflect)在模态窗口内。但是，如果模态窗口内的值发生变化，则不会反射(reflect)在父 ng-model 中。这是我的代码:

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;

};

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

Answer 1

改变:

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

进入:

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

这与嵌入有关。检查:https://github.com/angular-ui/bootstrap/issues/969