AngularJS:TypeError: undefined 不是具有链式选择的函数

AngularJS: TypeError: undefined is not a function with chained selects

本文关键字：选择 函数 TypeError undefined AngularJS      更新时间：2023-09-26

我有两个选择框，其中一个框的选项会立即加载，第二个（子）选择将从查询 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 的相同复制。

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

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;
    };

现在它就像一个魅力。

有同样的问题，解决方案是根据此答案将angular-mocks.js更新到匹配的版本。

相关文章：