问题简短 - $ scope。$ angular内置一个angularjs控制器总是将newValue和oldValues视为相同。
详细信息:
我正在编写一个包含三个用例的angularjs应用程序:createProduct,updateProduct和searchProducts。我正在尝试使用相同的控制器和部分createProduct和updateProduct。如果用户导航到' / createProduct' ,用于创建产品的逻辑将执行。如果用户单击搜索产品页面上的“更新”按钮,他应该会看到包含所选产品详细信息的相同视图。现在我只是想用虚拟产品数据来测试它。
为实现这一目标,我创建了一项服务,将产品信息从SearchProduct控制器共享到CreateProduct控制器。
.factory('ShareProductService', function() {
var product = {};
var shareProductService = {};
shareProductService.setProduct = function( _product ) {
product = _product;
};
shareProductService.getProduct = function() {
return product;
};
shareProductService.getProductCode = function() {
return product.productCode;
};
return shareProductService;
});
我正在使用angular-ui-router进行路由。以下是路线配置:
$stateProvider.state('home', {
url: '/',
templateUrl: 'search-products.html',
controller: 'SearchProductsController'
}).state('createProduct', {
url: '/createProduct',
templateUrl: 'create-product.html',
controller: 'CreateProductController'
});
}]);
在search-products.html视图中,当用户点击“更新”按钮时,应将其重定向到create-product.html视图,但更新特定的逻辑应在CreateProduct控制器中执行:
//In search-products view
<button type="button" ng-click="updateProduct()">Update Product</button>
//In search-products controller
$scope.updateProduct(productCode) = function() {
var product = {productCode: "test"}; // Hard-coded just for for testing
ShareProductService.setProduct(product);
$state.go('createProduct');
}
在CreateProductController中我在ShareProductService.getProductCode上使用监视来确定它是用于创建还是更新:
$scope.$watch(ShareProductService.getProductCode, function(newValue, oldValue){
console.log(newValue + " " + oldValue); //always same
if(newValue !== oldValue){
var productForEdit = ShareProductService.getProduct();
//Update specific logic
}else{
//Create specific logic
}
});
问题是,每次执行watch表达式时,newValue和oldValue总是相同的。我可能以非最佳方式实现这种情况,但我对手表的行为感到困惑。据我所知,每次设置productCode时newValue和oldValue都应该不同。我对手表如何工作的理解是否存在差距? 另外,实现这种情况的更好方法是什么?