Javascript angularJs，I'；从ajax调用获取数据后，我没有成功刷新set-view

在回答这个问题之前,我已经找了很多,找不到适合我的解决办法

我已经开始研究angular，我已经能够创建一个简单的页面，其中包含一个对象

我想要实现的下一步是将这个对象从AJAX调用更新为API。问题是我不能这样做。 在我看来，问题在于控制器内的函数：无法编辑同一控制器的属性：

app.controller('StoreController', [ '$http', 'ajaxFactory',
    function($http, ajaxFactory) {
        this.products = products;

        this.getProducts = function() {
            /* this works and empty the object AND the view on the click */
            this.products = [];

            ajaxFactory.getFamily2().then(function(data) {
                /*
                 * this DOES NOT works, DOES NOT empty the object NOR the
                 * view on the click
                 */
                /*
                 * i'm sure the AJAX call is working, i can see the result
                 * and also alert his content
                 */
                this.products = data;
            });

        };
    } ]);

提前谢谢

完整代码： Html:

---

})（）

您在闭包中对

this.products

的引用无效（它不引用

this.products

在

getProducts

函数之外声明）。你可以这样纠正它

app.controller('StoreController', [ '$http', 'ajaxFactory',
    function($http, ajaxFactory) {
        var controller = this;
        controller.products = products;

        controller.getProducts = function() {
            /* this works and empty the object AND the view on the click */
            controller.products = [];

            ajaxFactory.getFamily2().then(function(data) {
                /*
                 * this DOES NOT works, DOES NOT empty the object NOR the
                 * view on the click
                 */
                /*
                 * i'm sure the AJAX call is working, i can see the result
                 * and also alert his content
                 */
                controller.products = data;
            });

        };
    } ]);

---

您还可以查看一下，使您的代码更健壮，更易于测试

你有错误吗？AjaxFactory是否返回正确的数据？看起来就像JavaScript在不同函数中更改“this”值的简单问题。尝试将

this

存储在变量中，如

var self=this

，然后设置

self.products

。

(function() {
var app = angular.module('catalogo', [ 'store-directives' ]);

app.factory('ajaxFactory', function($http) {
    var factory = {};
    factory.getFamily2 = function() {
        return $http.get("http://apigility-ds.gsanet.it/rpc").then(
                function(result) {
                    return result.data;
                });
    }
    return factory;
});

app.controller('TotalPriceController', function() {
    this.totalPrice = 0;

    this.calculateTotalPrice = function() {
        this.totalPrice = 0;
        for ( var x in products) {
            var product = products[x];
            if (typeof (product.num) !== 'undefined') {
                this.totalPrice += (product.price * product.num);
            }
        }
    };
});

app.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

app.controller('StoreController', [ '$http', 'ajaxFactory',
        function($http, ajaxFactory) {
            this.products = products;

            this.getProducts = function() {
                this.products = [];

                ajaxFactory.getFamily2().then(function(data) {
                    this.products = data;
                });

            };
        } ]);

app.controller('ReviewController', function() {
    this.review = {};

    this.addReview = function(product) {
        product.reviews.push(this.review);
        this.review = {};
    };
});

var products = [ {
    name : 'Ballons',
    price : 7.99,
    description : "A lot of colored ballons",
    images : [ "../img/balloons.jpg", "../img/balloons2.jpg" ],
    specs : {
        number : 10,
        color : 'various'
    },
    reviews : []
}, {
    name : 'Cards',
    price : 3.99,
    description : "wonderful set of cards.",
    images : [ "../img/cards.jpg", "../img/cards2.jpg" ],
    specs : {
        type : 'poker deck',
        cards : 52
    },
    reviews : []
}, {
    name : 'Watch',
    price : 159.99,
    description : "An awesome watch, make you so cool.",
    images : [ "../img/watchmaker.jpg", "../img/watchmaker2.jpg" ],
    specs : {
        color : 'black',
        year : '2014',
        brand : 'SWATCH'
    },
    reviews : []
} ];

app.controller('StoreController', [ '$http', 'ajaxFactory',
    function($http, ajaxFactory) {
        var controller = this;
        controller.products = products;

        controller.getProducts = function() {
            /* this works and empty the object AND the view on the click */
            controller.products = [];

            ajaxFactory.getFamily2().then(function(data) {
                /*
                 * this DOES NOT works, DOES NOT empty the object NOR the
                 * view on the click
                 */
                /*
                 * i'm sure the AJAX call is working, i can see the result
                 * and also alert his content
                 */
                controller.products = data;
            });

        };
    } ]);