AngularJS $http 无限调用

Question

有人可以解释为什么 $http 请求会向服务器发送无限数量的请求吗？ 在我的应用程序中，此代码向服务器发送无限请求

(function(){
    var app = angular.module("GrahamsSocksProducts", ["ngCookies"]);
    app.controller("ProductsController", ["$controller", "$http", "$cookies", function($controller, $http, $cookies){
.
.
.
this.setCookie = function(){
        username = "Some random guy"
        alert(45)

        $http({
            method : "GET",
            url : "http://_____________",
            params : { username : username }
        }).then(function(){
            //do something
        })
    }

但是，当我删除 http 请求时，只有一个请求被传递到服务器，如下所示：

.
.    
.
this.setCookie = function(){
        username = "Some random guy"
        alert(45)
}
.
.
.

HTML：

<div ng-app="GrahamsSocksProducts">
        <div ng-controller="ProductsController as products">
        {{ products.setCookie() }}
            <div class="row">
                <div ng-repeat="product in products.products">
                    <div class="col-sm-4 col-lg-4 col-md-4">
                        <div class="thumbnail">
                            <img ng-src="{{products.getImageTag(product)}}">
                            <div class="caption">
                                <h4 class="pull-right">${{ product.price }}</h4>
                                <h4>
                                    <a href="#"> {{ product.name }}</a>
                                </h4>
                                <p>{{ product.description }}</a>.</p>
                                </div>
                    </div>
                    <div class="ratings">
                        <p class="pull-right">{{ product.ratings }} / 5</p>
                        <p>
                                <span ng-class="products.getStarColor(product.ratings, 1)" ng-click="product.ratings=1"></span>
                                <span ng-class="products.getStarColor(product.ratings, 2)" ng-click="product.ratings=2"></span>
                                <span ng-class="products.getStarColor(product.ratings, 3)" ng-click="product.ratings=3"></span>
                                <span ng-class="products.getStarColor(product.ratings, 4)" ng-click="product.ratings=4"></span>
                                <span ng-class="products.getStarColor(product.ratings, 5)" ng-click="product.ratings=5"></span>
                        </p>
                    </div>
                    <div>
                        <button class="btn btn-primary" ng-click="products.addToCart(product)">Add to Cart</button>
                        <button class="btn btn-default">Checkout</button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="container">                 
                        <div class="jumbotron">
                            <ul class="list-group"ng-repeat="cartProduct in products.getCartNameAndQuantity()">
                                <li class="list-group-item">{{ cartProduct.name }}  ({{ cartProduct.quantity }})</li>
                            </ul>
                            Cart products price : {{ products.getCartPrice() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

我已阅读其他问题，例如： Infinite loop when trying to make Angularjs display a promise 他们已经回答了 AngularJS 如何允许双向数据绑定，但在这种情况下，当 $http 代码被删除时，请求被发送一次，否则无限次。

Answer 1

每次运行摘要循环时都会运行表达式 {{ products.setCookie() }}，这非常多。每次页面更改、点击、事件等时。我不知道为什么你在视图本身上有这个表达式，但你需要把它放在其他地方