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

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