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

I have a sidebar that contains a feed from various social medias, along with a service in AngularJS that queries my API for the data. Below is the controller, along with the service (in that order). Why isn't it being executed on page load, and how should I rewrite my code to make it load the data when the page is rendered to the client?

我有一个侧边栏，其中包含来自各种社交媒体的供稿，以及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');
  }
}]);

3 个解决方案

#1

You can only use things (be it services, factories, filters, etc) from another module if you have first injected that module into your current one. As the code above is written your modules don't know about each other, and so you can't inject MediaServ into HomeController.

如果您已经将该模块注入当前模块，则只能使用来自其他模块的东西（无论是服务，工厂，过滤器等）。在编写上面的代码时，您的模块彼此不了解，因此您无法将MediaServ注入HomeController。

To fix it, inject the MediaServ module into the HomeCtrl module like this:

要解决此问题，请将MediaServ模块注入HomeCtrl模块，如下所示：

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

I will also suggest not shortening names (minifiers should shorten things, developers should not) and not using the same name for services and apps. The last one in particular can cause a lot of confusion in a large project. Personally I prefer to name modules things like "media.services" and services "MediaService" but that is personal taste, just keep a clear naming convention so that you always know what is what.

我还建议不要缩短名称（缩小词应该缩短，开发人员不应该），而不是使用相同的名称来提供服务和应用程序。特别是最后一个可能会在大型项目中引起很多混乱。就个人而言，我更喜欢将模块命名为“media.services”和服务“MediaService”，但这是个人品味，只需保持明确的命名约定，以便您始终知道什么是什么。

#2

You shouldn't need to wrap your code in angular.element(document).ready(function () { });

您不需要将代码包装在angular.element（document）.ready（function（）{}）中;

The controller will execute on page load automatically, provided it is reference in the page.

只要页面中有引用，控制器就会自动执行页面加载。

#3

So, UncleDave and Erik Honns' responses both led me to realize what was wrong (on top of having a typo in handleRes). Here is my new code:

所以，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);
}]);

It is now working. Thank you everybody for your help. I won't pick a best answer, and instead will let others vote. Feel free to flag this question to be deleted, as the errors were more on my side (kind of being lazy about reading through my code, but I thought that this was one of those Angular things you just kind of have to learn).

它现在正在运作。谢谢大家的帮助。我不会选择最佳答案，而是让其他人投票。随意将这个问题标记为删除，因为错误更多地在我身边（有点读我的代码是懒惰的，但我认为这是你需要学习的那些Angular之一）。

Thanks everyone for your help!

谢谢大家的帮助！

#1