两种方式绑定不适用于带有 angularjs 的模态（子控制器）中的变量答案

【问题标题】：Two way binding not working with a variable in a Modal (Subcontroller) with angularjs两种方式绑定不适用于带有 angularjs 的模态（子控制器）中的变量
【发布时间】：2014-04-21 02:25:21
【问题描述】：

您好，我有一个产品列表，我希望人们选择其中一个，然后显示一个模式，他们可以在其中输入额外信息（评论）。我将“AngularJS”与“Angular-UI”和“Angular-UI-bootstrap”一起使用。我想我将能够使用http://angular-ui.github.io/bootstrap/#/modal 给出的示例使其工作，但是我似乎无法保存评论。它始终保持“请输入评论”。代码如下：

模态模板：

   <script type="text/ng-template" id="orderModal">
        <div class="modal-header">
            <h3>Title</h3>
        </div>
        <div class="modal-body">
            <div class="alignleft">{{Product.Naam}}</div>
            <div class="alignright">€{{Product.Prijs}}</div>
            <div style="clear: both;"></div>
            <p>Heeft u een nog opmerking bij dit product?</p>
            <input type="text" name="Comment" ng-model="Comment" />
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">Toevoegen</button>
            <button class="btn btn-warning" ng-click="cancel()">Annuleren</button>
        </div>
    </script>

这里是控制器：

productModule.controller("ProductsController", function ($scope, bootstrappedData, $modal, $log) {
    $scope.products = bootstrappedData.products;

    ...
    $scope.AddNormalOrder = function (product) {
            ....
    };

    $scope.OpenModal = function (product)
    {
        var modalInstance = $modal.open({
            templateUrl: 'orderModal',
            controller: ModalInstanceCtrl,
            resolve: {
                product: function () {
                    return product;
                }
            }
         });
        modalInstance.result.then(function (order) {
            $scope.AddNormalOrder(order);
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
});
var ModalInstanceCtrl = function ($scope, $modalInstance, product) {
    $scope.Product = product;
    $scope.Comment = "Please enter a comment"; // it never changes
    $scope.ok = function () {
        var order = $scope.Product;
        order.Comment = $scope.Comment; // Here even if I check the value in debug after                     //changing it it still stays the same value ("Please enter a comment")
        $modalInstance.close(order);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

TL;DR ModalInstanceCtrl 中的 $scope.Comment 如果更改 .

中的值，则永远不会更改

【问题讨论】：

标签： javascript angularjs angularjs-scope angular-ui angular-ui-bootstrap

【解决方案1】：

似乎是范围界定问题。试试这个：

var ModalInstanceCtrl = function ($scope, $modalInstance, product, $log) {
    $scope.Product = product;
    $scope.Product.Comment = "Please enter a comment";
    $scope.ok = function () {
        var order = $scope.Product;
        $log.info(order.Comment);  //You should see the updated Comment in your console
        $modalInstance.close(order);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

将您的输入更改为：

<input type="text" name="Comment" ng-model="Product.Comment" />

【讨论】：

我遇到了同样的问题。您的解决方案有效，但您能解释一下原因吗？或者更好，为什么上面的例子不起作用？

【解决方案2】：

似乎这是引导模式代码的问题。

查看此以获得不同的修复 https://stackoverflow.com/a/23518971/433390

也就是说，在模板中使用 $parent.Comment 以及问题中发布的代码

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

这是一个解释 https://github.com/angular-ui/bootstrap/issues/969

【讨论】：