Bắt Lỗi Loại: Không thể đọc thuộc 'truy vấn' không xác định

Question

Tôi quen bản thân mình với AngularJS và thực hiện cuộc gọi đến một backend Web API và tôi nhận được lỗi của

angular.js:13424 TypeError: Cannot read property 'query' of undefined

Tôi có một productListController

(function() 
{ 
"use strict"; 
angular.module("productManagement").controller("ProductListController", ["productResource", ProductListController]); 
function ProductListController($scope, productResource) { 

    productResource.query(function (data) { 
     $scope.products = data 
    }); 
} 
})(); 

và tôi đã tạo ra một dịch vụ gọi là productResource

(function() { 
"use strict"; 

angular.module("common.services").factory("productResource", ["$resource", "appSettings", productResource]) 

function productResource($resource, appSettings) { 
    return $resource(appSettings.serverPath + "/api/products/:id").query(); 
} 
}()); 

Các appSettings là một hằng số chỉ định đường dẫn.

Tại sao query không xác định?

Answer 1

điều khiển của bạn đang mong đợi sự phụ thuộc sau đây để được tiêm:

$scope, productResource 

và thực sự bạn đang tiêm chỉ "productResource" thay vì "$scope", "productResource"

điều khiển của bạn nên được khởi tạo như thế này:

angular.module("productManagement").controller("ProductListController", ["$scope", "productResource", ProductListController]); 

function ProductListController($scope, productResource) { 
    // ... 
} 

Tên của các phụ thuộc được truyền cần phải được đồng bộ với các tham số trong bộ điều khiển khai báo hàm er - tại thời điểm bạn đang tiêm "productResource", nó sẽ đi vào tham số $scope.

Answer 2

Tôi đã gặp sự cố này một thời gian trước và mất nhiều giờ để tìm ra.

Trong một số trường hợp nhất định, bạn cần phải đảm bảo rằng bạn tiêm "productResource" và "$scope" và làm theo một thứ tự cụ thể. Hãy để tôi giải thích:

angular.module("productManagement").controller("ProductListController", ["$scope", "productResource", ProductListController]); 

    function ProductListController($scope, productResource) { 
     // ... 
    } 

Mã trên sẽ luôn hoạt động, nhưng nếu bạn chuyển vị trí như bên dưới, trong một số trường hợp (như tôi đã đề cập ở trên), nó sẽ không hoạt động.

angular.module("productManagement").controller("ProductListController", ["productResource","$scope", ProductListController]); 

    function ProductListController($scope, productResource) { 
     // ... 
    } 

Tôi chưa bao giờ gặp vấn đề này để đảm bảo phụ thuộc được tiêm theo đúng thứ tự cho đến ngày hôm nay. Nếu sau khi tất cả điều này mã của bạn vẫn không hoạt động thì vấn đề có lẽ là ở nơi khác.
Tôi hy vọng điều này sẽ hữu ích.