即使在决策服务变量的变化后AngularJS手表没有击中控制器 [英] AngularJS watch is not hitting in controller even after making the change in Service variable

问题描述

这是我的code。

sampleApp.factory('ProductService', ['$http', '$q', function ($http, $q){
    var req = {
        method: 'POST',
        url: 'ProductData.txt',
        //url: 'http://localhost/cgi-bin/superCategory.pl',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }//,
        //data: { action: 'GET' }
    };  
    var ProductService =  {};
    ProductService.Products = [];
    return {
        GetProducts: function () {
            var defer = $q.defer();
            $http(req).then(function(response) {
                ProductService.Products = response.data;
                defer.resolve(ProductService.Products);
            }, function(error) {
                defer.reject("Some error");
            });
            return defer.promise;
        },

        UpdateInfo: function (ProductID, VariantID) {

            for (i in ProductService.Products) {
                if (ProductService.Products[i].ProductID == ProductID) {
                    for (j in ProductService.Products[i].Variants)  {
                        if (ProductService.Products[i].Variants[j].VariantID == VariantID) {
                            ProductService.Products[i].Variants[j].InCart = 1;    /* Updating Info Here, But its not reflecting */ 
                            alert ('information updated');      // reaching here
                            break;
                        }
                    }
                    break;
                }
            }
        }
    };
}]);


sampleApp.controller('ProductsController', function ($scope, $routeParams, ProductService, ShoppingCartService) {

    $scope.Products = [];

    $scope.GetProducts = function() {
        ProductService.GetProducts().then
        (
            function(response) {
                $scope.Products = response;
            },
            function(error) {
                alert ('error worng');
            }
        );
    };

    $scope.GetProducts();


    $scope.$watch('ProductService.Products', function(newVal) {
        alert ('hitting watch');    // Not Reaching Here
        $scope.Products = NewVal;
        alert ($scope.Products);
    });
});

我从一些其他的服务调用updateInfo时在ProductService。虽然它的深远提醒（信息更新'）;在updateInfo时。但没有达到提醒（打表）;在控制器中。

I am calling UpdateInfo in ProductService from some other service. Though its reaching to alert ('information updated'); in UpdateInfo. but not reaching to alert ('hitting watch'); in controller.

能有人帮我如何解决这个问题呢？

Can some one help me how to solve this issue?

推荐答案

而不是看ProductsService.Products，然后维持在一个范围单独副本，为什么不使用相同的值本身。

Instead of watching ProductsService.Products and then maintaining a seperate copy of that in Scope, why not use the same value itself.

分配到服务的引用。

$scope.ProductService = ProductService;

在这种方式，你ProductService现在接触到的观点。现在，在你的HTML页面可以直接访问ProductServices.Products并尽快改变服务里面的价值，他们会自动反映在视图中。

In this way, you're ProductService is now exposed to the view. Now in your HTML page you can directly access ProductServices.Products and as soon as the value inside the service changes, they are automatically reflected in the View.

没有肮脏$观察，没有单独的副本。

No dirty $Watch, no separate copies.

编辑：去通过@ JB的回答，您必须命名为产品添加属性的服务

Edit : Going by @JB's answer, you must add an attribute named Products to the Service.

像这样

    return {

            Products : [], 

            GetProducts: function () {
                var defer = $q.defer();
                $http(req).then(function(response) {
                    ProductService.Products = response.data;
                    defer.resolve(ProductService.Products);
                }, function(error) {
                    defer.reject("Some error");
                });
                return defer.promise;
            },

            ........

这篇关于即使在决策服务变量的变化后AngularJS手表没有击中控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！