Angular UI Modal 2 方式绑定不起作用 [英] Angular UI Modal 2 Way Binding Not Working

问题描述

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

HTML:

<div ng-controller="ParentController"><br/><input type="text" ng-model="textbox.sample"/><a class="btn btn-default" ng-click="open(textbox.sample)">点击我</a><script type="text/ng-template" id="ModalContent.html"><输入类型=文本"ng-model=ngModel"/><br/>{{ 文本框 }}

控制器:

var app = angular.module('app', ['ui.bootstrap']);app.controller('ParentController', function ($scope, $modal) {$scope.textbox = {};//模态窗口$scope.open = function (_ngModel) {//ngModel 是从模板中的 open() 函数传递过来的var modalInstance = $modal.open({templateUrl: 'ModalContent.html',控制器:ModalInstanceCtrl，解决: {ngModel: 函数 () {返回_ngModel；}}//结束解析});};});var ModalInstanceCtrl = function ($scope, $modalInstance, ngModel) {$scope.ngModel = ngModel;};

为什么在上面的代码中，父实例和模态实例之间的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);//将这个返回给 modalInstance.result}

然后在父控制器中，或任何打开模态窗口的东西:

$scope.open = function (_ngModel) {//ngModel 是从模板中的 open() 函数传递过来的var modalInstance = $modal.open({templateUrl: 'ModalContent.html',控制器:ModalInstanceCtrl，解决: {ngModel: 函数 () {返回_ngModel；}}//结束解析});modalInstance.result.then(函数(结果){$scope.textbox.sample = 结果；});};

I am adding an Angular UI Modal where I am passing the scope through to the Modal Window for 2 way binding. I used the resolve method to pass the scope value. Doing so works sort of works meaning when the ng-model value changes in parent, it reflects inside the modal window. However, if the value changes inside the modal window, it is not reflecting in the parent ng-model. Here is my code:

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;

};

Why isint the 2 way binding between parent and modal instance not working in the above code?

解决方案

I think you're under the impression that ng-model="textbox.sample" in the parent and ng-model="ngModel" in the modal are the same because you are passing textbox.sample to the modal and you're able to see the correct value in the modal window. The only reason this is working is because you're explicitly setting the $scope.ngModel property every time to modal window opens.

One way to make this work how you expect is to just use the $scope.textbox.sample property in both places, but I wouldn't recommend that.

Perhaps the proper way would be to use the modalInstance.result promise, something like this:

Create a button on the modal and make it's ng-click="ok()"

$scope.ok = function () {
    $modalInstance.close($scope.ngModal); // will return this to the modalInstance.result
}

And then in the parent controller, or whatever opens the 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
    });

    modalInstance.result.then(function (result) {
        $scope.textbox.sample = result;
    });
};

这篇关于Angular UI Modal 2 方式绑定不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！