json AngularJS 在控制器中多次调用 HTTP
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17967437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS calls HTTP multiple times in controller
提问by iamdash
I am developing a page with Angular, and have an init() method in my controller. The code is as follows:
我正在使用 Angular 开发一个页面，并且在我的控制器中有一个 init() 方法。代码如下：
var filtersController = ['$scope', '$http', function ($scope, $http) {
$scope.init = function () {
$http({
method: 'GET',
url: '/json-tags-test',
cache: true
}).success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
}];
It is just a call to a simple JSON file.
这只是对简单 JSON 文件的调用。
My HTML is as follows:
我的 HTML 如下：
<div class="container main-frame" ng-app="projectsApp" ng-controller="filtersController" ng-init="init()">
</div>
For some reason, this get call gets call twice every time I load the page. Is this standard behaviour?
出于某种原因，每次我加载页面时，这个 get 调用都会被调用两次。这是标准行为吗？
Many thanks,
非常感谢，
Dash
短跑
回答by Jeremy D
This problem may also be caused by having an ng-appwith routing to your controller and an ng-controllerreference in your page. For example, if your app looks like:
此问题也可能是由于ng-app路由到控制器和ng-controller页面中的引用引起的。例如，如果您的应用程序如下所示：
<html lang="en" ng-app="myApp">
<head>...</head>
<body>
<div ng-controller="myController">
...
</div>
</body>
</html>
Javascript defining the app:
定义应用程序的 Javascript：
angular.module('myApp',[]) {
$routeProvider.when('/path', {templateUrl: '...', controller: myController);
In the case above, with the defined routing to myController, the controller will be instantiated twice and you'll see two calls as described.
在上面的例子中，通过定义到 myController 的路由，控制器将被实例化两次，你会看到描述的两次调用。
Updated
更新
Above code describe what is problem but what is proper solution is missing so I updated answer as per @Intrepid comment.
上面的代码描述了问题所在，但缺少正确的解决方案，因此我根据@Intrepid 评论更新了答案。
Need to remove ng-controller="myController"from your html template if you already defined in route.
ng-controller="myController"如果您已经在路由中定义，则需要从您的 html 模板中删除。
回答by Abhishek Nandi
I don't think it is getting called twice, i just created a plunkfor you to see this.
我不认为它被调用了两次，我只是创建了一个plunk让你看到这个。
var app = angular.module('projectsApp', []);
app.controller('filtersController', ['$scope', '$http', function ($scope, $http) {
$scope.status = 'Page loading';
var count = 0;
$scope.init = function () {
$scope.status = 'API called';
$http({
method: 'GET',
url: '/json-tags-test',
cache: true
}).success(function (data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
console.log('success');
count++;
$scope.status = 'successful: '+ count;
}).error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
console.log('error');
count++;
$scope.status = 'failed times: '+ count;
});
};
}]);
XHR logs from DEV tools
来自 DEV 工具的 XHR 日志
Edit:
编辑：
Updated plunk with a dummy json file
使用虚拟 json 文件更新了 plunk
http://plnkr.co/edit/hTdtLK?p=preview
http://plnkr.co/edit/hTdtLK?p=preview
As you can see once again that its getting called only once. Clear the logs i guess you are seeing the logs for the previous page load, coz changes are immediately visible when in preview mode.
正如您再次看到的那样，它只被调用一次。清除日志我猜您正在看到上一个页面加载的日志，因为在预览模式下可以立即看到更改。
回答by SFK
If you are using UI-Router, better to use controllerAs in config and remove ng-controller in the view.
如果您使用 UI-Router，最好在配置中使用 controllerAs 并在视图中删除 ng-controller。
.state('master.userlist', {
url: "userlist",
views: {
userlist: {
templateUrl: 'app/user/userlist.html',
controller: 'UserController',
controllerAs:'vm'
},
'[email protected]': {
templateUrl: 'app/user/userdetail.html'
},
}
});