范围功能根据在该视图

Question

您好我在从毫微克视图称为控制器得到这个功能纳克的模型不更新值：

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

这是模态的。 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 --> 

现在，如果我在textarea的（例如）类型，然后按OK按钮，就会进入这个功能。现在，由于textarea的值已经改变，不应该反映在$ scope.productDescription的值中吗？看起来不是。我认为，无论何时在模型中进行更改，它都会覆盖$ scope.model_name值，我应该使用ng-change还是其他任何指令？

试过添加一个$ watch，但它不工作，任何建议？

P.S：console.log（$ scope.model_productDescription）; //显示旧描述，尽管我改变了它

谢谢。

Answer 1

最可能的原因是您的model.html正在创建子范围。您对模型属性所做的更改对于子级是本地的，并且由于原型继承而无法在父级中看到。

你可以尝试的是在控制器上创建一个对象，并绑定对象属性。

$scope.productObject={};

执行textarea的结合

<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

Answer 2

神......我要去解决它作为现在这样做：

从视图：

<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但是很好！