AngularJS $ http无限调用(AngularJS $http calling infinitely)

AngularJS $ http无限调用(AngularJS $http calling infinitely)

有人可以解释为什么$ 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代码被删除时，请求被发送一次，否则无限次。

Can someone explain why is the $http request sending infinite number of requests to the server? In my application, this code sends infinite requests to the server

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

However, when I remove the http request, only a single request is passed to the server, like this :

. . . 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>

I have read other questions such as this: Infinite loop when trying to make Angularjs display a promise They have answered about how AngularJS allows two-way data-binding but in this case, when the $http code is removed, the request is sent once, otherwise infinite times.

最满意答案

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

The expression {{ products.setCookie() }} is run every time the digest loop is run which is A LOT. Every time the page changes, click, events, etc. I'm not sure why you have this expression on the view itself but you'll need to put it elsewhere