angularjs scope。$ watch旧值始终与新值相同

时间:2015-08-05 02:05:22

标签: javascript angularjs angular-ui-router angularjs-watch

问题简短 - $ 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都应该不同。我对手表如何工作的理解是否存在差距? 另外,实现这种情况的更好方法是什么?

0 个答案:

没有答案