AngularJS $ http无限调用

有人可以解释为什么$ 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> 

我已经阅读了其他问题,例如: 无限循环,当试图使Angularjs显示一个承诺他们已经回答了AngularJS如何允许双向数据绑定,但在这种情况下,当$ http代码被删除,请求被发送一次否则无限次。

每当摘要循环运行时就运行expression式{{products.setCookie()}}。 每次页面变化,点击,事件等等。我不确定为什么你在视图本身上有这个expression式,但是你需要把它放在别处