角UI模态2路绑定不工作 [英] Angular UI Modal 2 Way Binding Not Working

问题描述

我加入了一个角UI模态在那里我传递的范围通过对模态窗口为2路绑定。我使用了决心方法传递的范围值。这样做的工作之类的工作时，在父母的NG-模型值的变化，它反映了模态窗口内的意思。然而，如果该值模态窗口内改变，所以不能在父纳克模型反射。这里是我的code：

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>

控制器：

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的2路父和模式的实例在上面code不工作之间的结合？

推荐答案

我觉得你的IM pression，根据 NG-模式=textbox.sample父和 NG-模式=ngModel的模式都是一样的，因为你是路过 textbox.sample 模态，你就能够看到在模式窗口正确的值。这是工作的唯一原因是因为你明确地设置 $ scope.ngModel 属性每到模态窗口时间打开。

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.

一个办法，使这项工作你怎么想到的是只使用 $ scope.textbox.sample 属性在这两个地方，但我不会建议。

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.

也许是正确的方法是使用 modalInstance.result 的承诺，是这样的：

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

在模式创建一个按钮，使得它的 NG-点击=OK（）

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;
    });
};

这篇关于角UI模态2路绑定不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！