javascript - 使用 AngularJS 将服务注入(inject) Controller 时遇到困难

Question

我在将 ServicesData 注入(inject) SearchCtrl 时遇到问题，并不断收到以下错误消息:Error: [$injector:unpr] Unknown provider: ServicesDataProvider <- ServicesData <- SearchCtrl 。可能是什么原因造成的？

app.js

angular.module('starter', ['ionic', 'jett.ionic.filter.bar', 'starter.controllers'])

  .state('app.playlists', {
    url: '/playlists',
    views: {
      'menuContent': {
        templateUrl: 'templates/playlists.html',
        controller: 'SearchCtrl'
      }
    }
  });
});

controller.js

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('SearchCtrl', ["$scope", "ServicesData", function($scope, $timeout, ServicesData, $ionicFilterBar) {

    // Get list items

    function getItems () {
      var items = [];
      for (var x = 1; x < 3; x++) {
        items.push({text: 'Item number ' + x});
      }
      $scope.items = items;
    }
    getItems();

    // Ionic filter bar

    var filterBarInstance;

    $scope.visible = true;
    $scope.nulledVisible = false;
    $scope.toggle = function(event) {
        if(event.target.id === 'nulled-search-button' && $scope.nulledVisible === false || event.target.id === 'header-search-button' && $scope.nulledVisible === false) {
          $scope.visible = !$scope.visible;  
          $scope.nulledVisible = true;
        } 
    };

    $scope.showFilterBar = function () {
      filterBarInstance = $ionicFilterBar.show({
        items: $scope.items,
        update: function (filteredItems, filterText) {
          $scope.items = filteredItems;
          if (filterText) {
            console.log(filterText);
          }
        }
      });
    };

    $scope.refreshItems = function () {
      if (filterBarInstance) {
        filterBarInstance();
        filterBarInstance = null;
      }

      $timeout(function () {
        getItems();
        $scope.$broadcast('scroll.refreshComplete');
      }, 1000);
    };
}]);

services.js

angular.module('starter.services', [])

.service("ServicesData", [function () {
    var servicesData = [
        { 
            title: 'Car Repair and Maintenance', 
            total: 7, 
            id: 1
        }
    ];

    return {
        getAllServices: function () {
            return servicesData;
        }
}])

Answer 1

两件事: 修复你的 Controller 声明

["$scope", "ServicesData", function($scope, $timeout, $ionicFilterBar) 
["$scope", "ServicesData", "$timeout", "$ionicFilterBar", function($scope, ServicesData, $timeout, $ionicFilterBar) 

将依赖项添加到您的服务模块，以便您的 Controller 能够访问在 start.services 模块中声明的内容。

angular.module('starter.controllers', ['starter.services'])