控制器内部的scope函数不根据视图中的ng模型更新值

scope function inside controller not updating the values according to ng-models in the view

本文关键字:ng 模型 更新 视图 scope 内部 函数 控制器      更新时间:2024-06-07

Hi我在从ng视图调用的控制器中得到了这个函数:

productApp.controller('ModalInstanceCtrl', function ($scope, $modalInstance, productFactory, prodId) {     
$scope.ok = function () {
          console.log($scope.model_productDescription);
          $scope.$watch(['model_productBrand,model_productName,model_productDescription,model_productPrice, model_productStock'], function() {
              var stock = '';
              if($scope.model_productStock) {
                  stock = 'AVAILABLE';
              }else{
                  stock = 'NO STOCK';
              }
              var productObject = {
                      id : prodId,
                      prodBrand : $scope.model_productBrand,
                      prodName : $scope.model_productName,
                      description : $scope.model_productDescription,
                      price : $scope.model_productPrice,
                      prodStock : stock
              }
              productFactory.updateProductById(productObject, function successCallback(data) {
                  // do something here in data
              }, function errorCallback(data, status) {
                  alert(data + ' Failed with error ' + status); 
              }); 
          })     
      };
});

这是modal.htm正文:

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" ng-click="cancel()">&times;</button>
      <h4 class="modal-title">Modify a Product</h4>
    </div>
    <div class="modal-body">
        <form class="form-horizontal">
            <fieldset>          
                <!-- Row 1 -->
                <div class="col-md-12 col-centered">
                    <div class="control-group">
                        <label class="control-label" for="prod_brand">Product Brand</label>
                        <input type="text" id="prod_brand" class="form-control"
                            ng-model="model_productBrand" required="required" value="prod.prodBrand">
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="prod_name">Product Type</label> <input
                            type="text" id="prod_name" class="form-control"
                            ng-model="model_productName" required="required" value="prod.prodName">
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="prod_price">Price</label>
                        <div class="input-group">
                            <span class="input-group-addon">$</span> <input type="text"
                                class="form-control" ng-model="model_productPrice" value="prod.price"> <span
                                class="input-group-addon">.00</span>
                        </div>
                    </div>  
                    <div class="control-group">
                        <label class="control-label" for="prod_description">Description</label>
                        <textarea id="prod_description" class="form-control" ng-model="model_productDescription" cols="70" rows="3">{{prod.description}}</textarea>
                    </div>
                    <div class="control-group" style="margin-top: 10px">
                        <div class="input-group">
                            <span class="input-group-addon"> <input type="checkbox" ng-model="model_productStock">
                            </span> 
                            <span class="form-control no-cursor">Stock</span>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
      <button type="button" class="btn btn-primary" ng-click="ok()">Edit product</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

现在,如果我在文本区域键入(例如),然后按下ok按钮,它就会进入这个功能。现在,既然textarea值已经更改,不应该反映在$scope.productDescription值中吗?看起来不是。我想,每当你对模型进行更改时,它都会覆盖$scope.model_name值,我应该使用ng-change或任何其他指令吗?

尝试添加一块$watch,但也不起作用,有什么建议吗?

第页。S: console.log($scope.model_productDescription);//显示了旧的描述,尽管我将其更改为

谢谢。

最可能的原因是您的model.html正在创建子作用域。您对模型属性所做的更改是子级的本地更改,由于原型继承,因此在父级中看不到。

您可以尝试在控制器上创建一个对象,并对对象属性进行绑定。

$scope.productObject={};

将文本区域绑定到

 <textarea id="prod_description" class="form-control" ng-model="productObject.productDescription" cols="70" rows="3">{{prod.description}}</textarea>

现在,这些更改将反映在productObject.productDescription属性中。

还可以浏览这个wiki来了解作用域继承是如何工作的https://github.com/angular/angular.js/wiki/Understanding-Scopes

上帝。。。我现在要通过这样做来修复它:

从视图来看:

<button type="button" class="btn btn-primary" ng-click="ok(model_productBrand, model_productName, model_productPrice, model_productDescription, model_productStock)">Edit product</button>

从控制器将vars传递给ok()函数:

$scope.ok = function (model_productBrand, model_productName, model_productDescription, model_productPrice, model_productStock) {

是的。。。我知道它看起来很丑陋,但是bleh。。。

谢谢你,无论如何,我都会勾选你的答案,因为你给我的解决方案真的很方便,唯一的问题是我的项目对你提供的解决方案的设计有点糟糕:p,但很好!