javascript - 两种方式绑定(bind)不适用于带有angularjs的模态(子 Controller )中的变量

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>

这是 Controller :

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

长话短说如果更改中的值，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" />