爲什麼這個函數不能在頁面加載時執行？

我有一個邊欄，其中包含來自各種社交媒體的訂閱源，以及AngularJS中用於查詢我的API數據的服務。下面是控制器和服務（按此順序）。爲什麼不在頁面加載時執行，以及當頁面呈現給客戶端時，我應該如何重寫代碼以使其加載數據？爲什麼這個函數不能在頁面加載時執行？

angular.module('HomeCtrl', ['MediaServ']).controller('HomeController', [ 
'$scope', 
'MediaServ', 
'$rootScope', 
function($scope, $rootScope, MediaServ){ 
    if ($rootScope){ 
     $scope = $rootScope; 
    } 
    function handleRes(response){ 
     console.log('hello!'); 
    } 
    angular.element(document).ready(function() { 
     $scope.SocialMedia = function(){ 
      MediaServ.feed() 
       .then(handleRes, handleRes); 
     } 
    }); 

}]);

angular.module('MediaServ', []).service('MediaServ', [ 
'$http', 
function($http){ 
    this.feed = function(){ 
    return $http.get('/api/social/feed'); 
    } 
}]);

來源

2015-05-10 h3xc0ntr0l

你能爲同樣的東西創建一個小提琴嗎？ – Pratik

如果您已經注入該模塊到您當前只能使用的東西（無論是服務，工廠，過濾器等）從另一個模塊。由於上面的代碼被寫入您的模塊彼此不知道，所以您不能注入MediaServ到HomeController。

爲了解決這個問題，注入MediaServ模塊插入HomeCtrl模塊是這樣的：

angular.module('HomeCtrl', ['MediaServ'])...

我也會建議不要縮短名稱（minifiers應該縮短東西，開發商不應該）而不是爲服務和應用使用相同的名稱。特別是最後一項可能會在一個大型項目中造成很多混亂。就我個人而言，我更喜歡將模塊命名爲「media.services」和服務「MediaService」，但這是個人的品味，只需保持一個明確的命名約定，以便始終知道是什麼。

來源

2015-05-10 19:32:29

我以這種方式重寫了我的代碼，問題依然存在。可以肯定的是，我已將新代碼放入原始問題中以反映我的更改。在我的控制檯窗口（即運行Node服務器，而不是瀏覽器控制檯窗口）中，我沒有看到任何對API路由器的請求。 – h3xc0ntr0l

當我在小提琴中測試它時，它適用於我。你能創造一個小提琴或垃圾箱，所以我們可以看到它是如何構建的？另外，請查看UncleDaves的答案。他有一點，你幾乎不需要在Angular中使用文檔。 –

對不起！我想出了我的錯誤。我會選擇它作爲正確的，所以這不會顯示爲一個未答覆的問題了。有關我現在這樣做的方式的評論？所有的讚賞！ – h3xc0ntr0l

你不應該需要包裝在angular.element(document).ready(function() { });

代碼控制器將在頁面加載時自動執行，只要它是在頁面引用。

來源

2015-05-10 20:26:08 UncleDave

所以，UncleDave和Erik Honns的迴應都讓我意識到什麼是錯的（在handleRes中有一個錯字）。這是我的新代碼：

angular.module('HomeCtrl', ['MediaServ']).controller('HomeController', [ 
'$scope', 
'$rootScope', 
'MediaServ', 
function($scope, $rootScope, MediaServ){ 
    if ($rootScope){ 
     $scope = $rootScope; 
    } 
    function handleRes(response){ 
     if (response.data.tweets){ 
      $scope.SocialMedia = response.data.tweets; 
     } 
    } 
    MediaServ.feed() 
     .then(handleRes, handleRes); 
}]);

它現在正在工作。謝謝大家的幫助。我不會選擇最佳答案，而是會讓其他人投票。隨意將這個問題標記爲被刪除，因爲錯誤更多地出現在我的身邊（對我的代碼的閱讀很懶惰，但我認爲這是你必須學習的那些Angular的東西之一）。

感謝大家的幫助！

來源

2015-05-10 20:33:15 h3xc0ntr0l

爲什麼這個函數不能在頁面加載時執行？

回答

相關問題