TypeError：在控制器之間共享數據時，carsService.getCars不是功能

Question

我需要在控制器之間共享數據。我在這個例子中發現的Passing data between controllers in Angular JS? &後發現了一個答案。 當導航到 「檔案」 視圖我得到：

控制器

angular.module('myApp', [ 
    'ngRoute', 
    'myApp.cars', 
    'myApp.profile', 
    'myApp.home', 
    'myApp.login', 
    'myApp.version' 
]). 
    config(['$routeProvider', function ($routeProvider) { 
     $routeProvider.otherwise({ 
     redirectTo: '/home' 
     }); 
    }]) 
. 
    service('carsService', function() { 
     var carList = []; 

     var addUserCar = function(newObj) { 
     carList.push(newObj); 
     console.log("Car Added") 
     }; 

     var getCars = function(){ 
     return carList; 
     }; 

     return { 
     addUserCar: addUserCar, 
     getCars: getCars 
     }; 

    }); 

汽車視圖

<ul class="cars"> 
    <li ng-repeat="car in cars"> 
    <div class="car"> 
     <div class="carView" href="car/{{car.id}}"> 
     <div class="imageView"> 
      <img alt="{{car.name}}" ng-src="{{car.image}}" /> 
     </div> 
     <div class="carText"> 
      <p>{{car.title}}</p> 
      <p>{{car.color}}</p> 
      <p>{{car.description}}</p> 
     </div> 
     </div> 
     <button class="addBtn" ng-click="addUserCar(car.id)">Add car</button> 
    </div> 
    </li> 
</ul> 

「類型錯誤控制器之間共享數據時carsService.getCars不是一個函數」

汽車控制器

.controller('carsCtrl', ['$scope', '$http', function ($scope, $http, carsService) { 

$http.get('views/cars.json') 
    .success(function (data) { 

    $scope.cars = data; 
    $scope.addCar = function(currId){ 
     carsService.addUserCar(currId); 
    }; 

    }) 
    .error(function() { 
    alert("can not get data from cars.json") 
    }); 
}]); 

檔案控制器

.controller('profileCtrl', ['$scope', '$http', function ($scope, carsService) { 
    $scope.userCars = carsService.getCars(); 
    }]); 

Answer 1

你的服務不正確注射。

.controller('profileCtrl', ['$scope', '$http', function ($scope, carsService) { 
     $scope.userCars = carsService.getCars(); 
    }]); 

應該

.controller('profileCtrl', ['$scope', '$http', 'carsService', function ($scope, carsService) { 
     $scope.userCars = carsService.getCars(); 
    }]); 

角度的噴射系統通過名稱查找服務，讓你把什麼順序他們在您的控制器功能也不要緊。但是，當您縮小JavaScript時，縮小過程會更改變量名稱。這打破了角的注射系統。

所以Angular使用數組符號，它指定了什麼服務你的注入，所以即使當你最小化你的代碼，它改變你的變量的名稱時，角可以將這些改變的變量名映射到數組中的值，找到正確的服務。

---

編輯

我注意到一個第二個問題。您正在向您的控制器注入$http服務，但使用您自己的carService。如果你console.log(carsService)你會發現它實際上是$http服務，你基本上已經有了別名。

所以，你需要無論是從陣列中刪除$http像這樣

.controller('profileCtrl', ['$scope', 'carsService', function ($scope, carsService) { 
     $scope.userCars = carsService.getCars(); 
    }]); 

或包括在您的函數，如果它在你的控制器需要

.controller('profileCtrl', ['$scope', '$http', 'carsService', function ($scope, $http, carsService) { 
     $scope.userCars = carsService.getCars(); 
    }]); 

---

再次編輯

誰曾經編輯我的答案，而我是，並刪除未使用$http依賴關係，在將來最好實際解釋爲什麼你這樣做，如果你要編輯一個像OP這樣的問題，我還沒有完全理解這個問題。否則，他們本來就不聰明。