1. 首頁
  2. 問答
  3. AngularJS在控制器中多次調用HTTP

AngularJS在控制器中多次調用HTTP

2013-07-31 57 views
9

我正在用Angular開發一個頁面，並且在我的控制器中有一個init（）方法。代碼如下：AngularJS在控制器中多次調用HTTP

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>

出於某種原因，這讓通話變得每次我打開網頁時調用的兩倍。這是標準行爲嗎？

非常感謝，

短跑

enter image description here

來源

2013-07-31 iamdash

+0

在最高upvotes底部的答案（目前33）應該被標記爲這個問題的正確答案。 – vivekp

回答

53

此問題也可能是由於您的頁面中有一個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"。

來源

2014-02-05 17:55:33

+0

很高興知道，這有助於我更好地理解這一點。 – gazdac

+0

@ user3195089這是很好的解釋。 – lbrahim

+0

@ user3195089謝謝，但如何克服這一個？我的意思是最佳做法。 –

4

我不認爲它是獲取調用兩次，我就創建了一個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日誌

Network console only one HTTP call

編輯：

更新普拉克與虛擬JSON文件

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

Same seen in logs

正如你可以再次看到它只被調用一次。清除日誌我猜你看到的是前一頁加載的日誌，在預覽模式下，即時更改會立即顯示。

來源

2013-07-31 10:18:06 Atrix1987

+0

謝謝你。是的，我現在看到了;狀態輸出1.然而，開發工具控制檯顯示兩個「XHR完成加載」消息到同一個URL？這是開發工具的功能嗎？ – iamdash

+0

1在控制檯1中，只能看到XHR完成加載url/json-tags-test的一個日誌。我也會附上截圖。如果它能幫助你，請接受答案。謝謝 – Atrix1987

+0

好吧，我明白了，但它也試圖在Plunk中加載兩次。除非我錯過了一些東西。我給OP添加了截圖，所以你可以看到，區別在於它顯然在第一次調用時發現/ jason-tags-test。 – iamdash

0

如果您使用的是UI-Router，最好在config中使用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' 
 
        }, 
 
       } 
 
      });

來源

2017-12-18 12:11:18 SFK

相關問題

 相關問題