Question

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

然而，在这个特定的控制器'portfolioController'上，当我尝试注入'Content'时，没有任何数据通过。我甚至在所有不同的页面上都做了一个console.log，这是唯一一个没有在我的控制台中显示数据的页面。还得到错误，'Content.all不是一个函数'，因为它没有通过。

显然我在某种程度上错误地注射它，但我已经尝试重新排列并且找不到合适的组合。这有什么问题？

正确加载服务的控制器示例 -

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

您的注射器阵列缺少Content变量。如果您选择使用该语法，则必须列出所有依赖项。

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

除此之外：您不应该使用注入器阵列语法。它非常容易出错，只有在缩小代码时才需要它。如果你正在缩小，你应该使用ngAnnotate来处理依赖符号。

为什么我的服务只能在我的一个控制器中正确加载？

1 个答案: