angularjs - 为什么我的服务无法仅在我的一个 Controller 中正确加载？

Question

我使用 MEAN 堆栈构建了我的个人网站，并使用在线 MongoDB 构建了一个后端来存储我网站的所有内容。然后，我创建了一个名为“contentService”的 Angular 服务，以通过 API 获取所有内容。我的网站上有 5 个页面，在 4/5 时，当我将“contentService”注入(inject) Controller 时，内容正确加载。

但是，在这个特定的 Controller “portfolioController”上，当我尝试注入(inject)“内容”时，没有任何数据通过。我什至在所有不同的页面上做了一个console.log，这是唯一一个数据没有显示在我的控制台中的页面。还收到错误“Content.all 不是函数”，因为它没有通过。

显然，我以某种方式错误地注入(inject)了它，但我尝试重新排列，但找不到正确的组合。这里有什么问题吗？

正确加载服务的 Controller 示例 -

angular.module('aboutCtrl', ['contentService'])

.controller('aboutController', function(Content) {

  var vm = this;

  Content.all()
    .success(function(data) {
      vm.paragraphOne = data[0].aboutParagraphs[0].paragraph;
      vm.paragraphTwo = data[0].aboutParagraphs[1].paragraph;
      vm.profiles = data[0].socialMediaProfiles;
    });

  vm.firstParagraph = true;

  vm.switchParagraph = function() {
    vm.firstParagraph = false;
  };

});

未正确加载内容的代码 -

angular.module('portfolioCtrl', ['ui.bootstrap', 'contentService'])

.controller('portfolioController', ['filterFilter', '$modal',        function(Content, filterFilter, $modal) {

  var vm = this;

  Content.all()
    .success(function(data) {
      vm.schools = data[0].languages;
      vm.companies = data[0].projects;
    });

  vm.carouselInterval = 3000;
  vm.noWrapSlides = false;

  vm.projectsToShow = vm.projects;

  vm.projectSort = function(language) {
    vm.projectsToShow = vm.projects;

    switch (language.reference) {

      case 'all':
        vm.projectsToShow;
        break;

      case 'angular':
        vm.projectsToShow = filterFilter(vm.projectsToShow, 'angular');
        break;

      case 'node':
        vm.projectsToShow = filterFilter(vm.projectsToShow, 'node');
        break;

      case 'ruby':
        vm.projectsToShow = filterFilter(vm.projectsToShow, 'ruby');
        break;

      default:
        vm.projectsToShow;
    };
  };

  vm.selectedProject;

  vm.openProject = function() {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'app/views/pages/portfolioModal.html',
      controller: 'modalCtrl',
      controllerAs: 'modal',
      size: 'lg',
      resolve: {
        project: function() {
          return vm.selectedProject;
        }
      }
    });
  };

}])

.controller('modalCtrl', ['$modalInstance', 'project',     function($modalInstance, project) {

  var vm = this;

  vm.selectedProject = project;

}]);

Answer 1

您的注入(inject)器数组缺少 Content 变量。如果您选择使用该语法，则必须在此处列出所有依赖项。

.controller('portfolioController', ['Content', 'filterFilter', '$modal',          
    function(Content, filterFilter, $modal) {
        ...
}])

旁白:您不应该使用注入(inject)器数组语法。它非常容易出错，并且只有在缩小代码时才需要它。如果你要缩小，你应该使用 ngAnnotate无论如何都要处理依赖符号。