Question

你好我有一个产品清单，我希望人们选择其中一个，然后一个模态显示他们可以输入额外信息（评论）。我正在使用'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永远不会改变。

Answer 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" />

Answer 2

似乎这是bootstrap模态代码的问题。

请参阅此内容以获取其他修复方法 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

双向绑定不使用带有angularjs的模态（子控制器）中的变量

2 个答案: