为什么这个函数不能在页面加载时执行？

我有一个边栏，其中包含来自各种社交媒体的订阅源，以及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

为什么这个函数不能在页面加载时执行？

回答

相关问题