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()">×</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,但很好!