AngularJS：TypeError：未定义不是具有链式选择的函数

Question

我有两个选择框，其中一个框的选项会立即加载，第二个（子）选择将从查询 API 的回调中获取其选项。预加载所有可能的选项不是一个选项，因为有 4200 条记录将在没有父选择的值的情况下加载。

当父框的ng-change事件触发时，调用：

function CertificateSearchCtrl($q, CPSIAService) {
    var vm = this;

    vm.products = [];
    vm.categories = [];

    vm.certficate = {};
    vm.categoryselect = {};
    vm.productselect = {};

我可以通过 ng-init 调用它，或者在第一次加载时直接在控制器中调用它

    vm.loadCategories = function() {
        CPSIAService.getCategories().then(function(results){
            vm.categories = results;
        });
    };

或者我可以以相同的方式调用它（ng-init 或直接通过控制器）

    vm.findProducts = function(data) {
        CPSIAService.getProductsByCategory(data.id).then(function(results){
                vm.products = results;
        });
    };
   ...

但我根本无法将两者一起调用，无论是通过 ng-change 还是直接通过控制器将类别 ID 强制到 findProducts() 调用中。

这应该反过来允许子选择填充“产品”数组。控制 html（通过指令输出）是这样的：

<div class="small-12 medium-6">
<select ng-model="vm.categoryselect" ng-change="vm.findProducts(vm.categoryselect)" ng-options="categories.category for categories in vm.categories track by categories.id" ng-cloak>
    <option value="">(choose a category)</option>
</select>
</div>
<div class="small-12 medium-6">
<select ng-model="vm.productselect" ng-change="vm.loadCertificate(vm.productselect)" ng-show="vm.products.length>0" ng-options="products.description for products in vm.products track by products.sku" ng-cloak>
    <option value="">(select a product)</option>
</select>
</div>

即使我最初尝试加载子选择的选项（而不是通过 ng-change 事件） - 我也会收到相同的错误。这是 Chrome 堆栈跟踪：

 TypeError: undefined is not a function
at render (angular.js:25905)
at Scope.$get.Scope.$digest (angular.js:14280)
at Scope.scopePrototype.$digest (hint.js:1468)
at Scope.$get.Scope.$apply (angular.js:14493)
at Scope.scopePrototype.$apply (hint.js:1478)
at HTMLSelectElement.selectionChanged (angular.js:25657)
at HTMLSelectElement.eventHandler (angular.js:3011)angular.js:11598 (anonymous function)angular.js:8548 $getangular.js:14282 $get.Scope.$digesthint.js:1468 scopePrototype.$digestangular.js:14493 $get.Scope.$applyhint.js:1478 scopePrototype.$applyangular.js:25657 selectionChangedangular.js:3011 eventHandler

以下是相关 JSON 数据的示例。我已经对其进行了检查/验证，这很好。

[{"sku":"2004","description":"ADHSVE PAPR BLK BDR8CT-12"},{"sku":"2005","description":"ADHSVE PAPR BLU BDR8CT-12"},{"sku":"2006","description":"ADHSVE PAPR RED BDR8CT-12"},{"sku":"0043630-5987","description":"BORD 50 CS ASST 60 CT-1"},{"sku":"51671","description":"SLFSTK BORDER BLK 2X12-12"},{"sku":"51672","description":"SLFSTK BORDER BLU 2X12-12"},{"sku":"51673","description":"SLFSTK BORDER RED 2X12-12"}]

救命！

我注意到我实际上可以加载我的孩子选择选项只有在我不尝试一次对我的服务进行两次调用。也许我误解了承诺？我认为他们使用 .then() 函数解决了问题，但是当我尝试完成第二个函数时它会出错，即使 API 调用很好并且数据确实按预期返回（参见上面的 JSON）

JQuery 不会影响错误 - 包含或不包含 jQuery 的相同再现。

Answer 1

找到解决方案的家伙。在我的服务中，我有这个：

function CPSIAService($q, Restangular) {

    var deferred = $q.defer();

    var CPSIAService = {};

    CPSIAService.getProductsByCategory = function(params) {
        //original call 
        // var response = Restangular.one('compliance/products/by/category',params);

        var response = Restangular.one('products.json'); //params from category would go here

        response.getList().then(function(data) {
            deferred.resolve(data);
        });

        return deferred.promise;
    };

    CPSIAService.getCategories = function() {
        //original call
        //var response = Restangular.all('compliance/categories/all');

        var response = Restangular.all('categories.json');

        response.getList().then(function(data) {
            deferred.resolve(data);
        });

        return deferred.promise;
    };

    return CPSIAService;
}

具体来说，请注意服务顶部的这一点：

var deferred = $q.defer();

如果我在初始页面加载后调用服务，则会发生错误，因为我没有推迟我调用的实际函数中的承诺。解决方案是从这个出发：

CPSIAService.getProductsByCategory = function(params) {
        var response = Restangular.one('compliance/products/by/category',params);

        response.getList().then(function(data) {
            deferred.resolve(data);
        });

        return deferred.promise;
    };

到这里：

CPSIAService.getProductsByCategory = function(params) {
        var deferred = $q.defer();  //defer here because we're calling it from the ng-change event fire
        var response = Restangular.one('compliance/products/by/category',params);

        response.getList().then(function(data) {
            deferred.resolve(data);
        });

        return deferred.promise;
    };

现在它就像一个魅力。

Answer 2

遇到了同样的问题，解决方案是将angular-mocks.js更新为this answer的匹配版本。