使用AngularJS難以將服務注入控制器

Question

我在將ServicesData注入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

2件事：修復您的控制器聲明

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

將依賴項添加到服務模塊，以便您的控制器將能夠訪問在start.services模塊中聲明的內容。

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

Answer 2

好像您有一個DI問題。 嘗試更改此：

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

至：

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

Answer 3

重寫依賴項注入行。

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

問題是順序應該相同，而且兩個地方都有寫依賴性。