javascript – 角色UI模态2路绑定不工作

我正在添加一个角度的UI模式,在这里我将范围传递给模态窗口以进行2路绑定.我使用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;

};

为什么isint在父模式和模态实例之间的方式绑定不能在上面的代码中工作？

解决方法

我认为您的印象是,在模式中,父模型中的ng-model =“textBox.sample”和模态中的ng-model =“ngModel”是相同的,因为您将textBox.sample传递到模态,您可以在模态窗口中查看正确的值.这是唯一的原因是因为您每次都会显式设置$scope.ngModel属性,以便模态窗口打开.

使这种工作方式如何期望的一种方法是只在两个地方使用$scope.textBox.sample属性,但我不会建议.

也许正确的方法是使用modalinstance.result promise,这样的东西：

在模态上创建一个按钮,使其成为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',resolve: {
            ngModel: function () {
                return _ngModel;
            }
        } // end resolve
    });

    modalinstance.result.then(function (result) {
        $scope.textBox.sample = result;
    });
};

原文地址：https://www.jb51.cc/js/154465.html