Question

我正在使用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.
        });
   };
}];

这只是对简单JSON文件的调用。

我的HTML如下：

<div class="container main-frame" ng-app="projectsApp" ng-controller="filtersController" ng-init="init()">
</div>

出于某种原因，每次加载页面时，此get调用都会调用两次。这是标准行为吗？

非常感谢，

短跑

enter image description here

Answer 1

此问题也可能是由于ng-app路由到您的控制器并且页面中有ng-controller引用。例如，如果您的应用看起来像：

<html lang="en" ng-app="myApp">
<head>...</head>
<body>
<div ng-controller="myController">
...
</div>
</body>
</html>

定义应用的Javascript：

angular.module('myApp',[]) {
$routeProvider.when('/path', {templateUrl: '...', controller: myController);

在上面的例子中，通过定义到myController的路由，控制器将被实例化两次，你将看到所描述的两个调用。

<强>更新

上面的代码描述了什么是问题，但缺少什么是正确的解决方案，所以我根据@Intrepid评论更新了答案。

如果您已在路线中定义，则需要从html模板中删除ng-controller="myController"。

Answer 2

我不认为它会被调用两次，我只是创建了一个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;
        });
   };
}]);

来自DEV工具的XHR日志

Network console only one HTTP call

修改

使用虚拟json文件更新了plunk

http://plnkr.co/edit/hTdtLK?p=preview

正如你再次看到它只被召唤一次。清除日志我猜你正在看到上一页加载的日志，在预览模式下，coz更改立即可见。

Answer 3

如果您使用的是UI-Router，最好在config中使用controllerAs并在视图中删除ng-controller。

＆＃13;

 .state('master.userlist', {
               url: "userlist",
               views: {
                   userlist: {
                       templateUrl: 'app/user/userlist.html', 
                       controller: 'UserController',
                       controllerAs:'vm'
                   },
                   'detail@master.userlist': {
                       templateUrl: 'app/user/userdetail.html'
                   },
               }
           });

＆＃13;

AngularJS在控制器中多次调用HTTP

3 个答案: