0

简而言之- angularjs 控制器中的 $scope.$watch 总是让 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 都应该不同。我对手表工作原理的理解是否存在差距？另外，实现这种情况的更好方法是什么？

4

0 回答 0