angularJs，从 ajax 调用获取数据后，我没有成功设置视图刷新

Question

我在回答这个问题之前进行了很多搜索，但找不到适合我的解决方案。

我已经开始学习 angular 并且我已经能够创建一个简单的页面，其中包含迭代对象的 ng-repeat。

我想要实现的下一步是将此对象从 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:

<div ng-app="catalogo">
<div ng-controller="StoreController as store">
    <!--  *** Store Header ***  -->
    <header class="text-center">
        <h3>– an Angular catalogue –</h3>
    </header>

    <!--  *** Products Container ***  -->
    <div class="container" ng-controller="TotalPriceController as total">
        <div class="row">
            <!--  Product Container  -->
            <div class="col col-xs-4"
                ng-repeat="(key,product) in store.products"
                ng-class="{ hero: key%2 === 0 }">
                <div class="row">
                    <product-title></product-title>
                </div>
                <div class="row">
                    <!-- Image Gallery  -->
                    <product-gallery></product-gallery>
                </div>
                <div class="row">
                    <!-- Product Tabs  -->
                    <product-calculate></product-calculate>
                </div>
                <div class="row">
                    <!-- Product Tabs  -->
                    <product-tabs></product-tabs>
                </div>
            </div>
        </div>
        <div class="row">
            <button ng-click="store.getProducts()">Kliq Here!</button>
            <product-total></product-total>
        </div>
    </div>
</div>

JS:

(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 : []
} ];

})();

Answer 1

您从闭包中对 this.products 的引用无效（它不引用在 getProducts 函数外声明的 this.products）。您可以这样更正

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;
            });

        };
    } ]);

Between 你也可以看看 angular services 让你的代码更健壮，更容易测试。