Question

我正在添加一个Angular UI模型，我将范围传递给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;
    });
};

Answer 3

对我而言，以上都没有。

相反，我必须像this comment in github中建议的那样。

要绑定到的变量必须是一个对象，而不仅仅是一个简单的值。

例如，如果$scope.value不起作用，则在使用$scope.someObject.value时会有效。

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

3 个答案: