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

Question

我有两个 select 框，其中一个框的选项会立即加载，第二个 (child) select 将从查询的回调中获取其选项一个 API。它不是 pre-load 所有可能选项的选项，因为如果没有 parent 的 selected 值，将加载 4200 条记录。

当 parent 框的 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() 调用中来同时调用两者。

反过来，这应该允许 child select 填充 "products" 数组。控制 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>

即使我最初尝试加载 child select 的选项（而不是通过 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 数据的示例。我已经 linted/validated 了，没问题。

[{"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"}]

求助！

我注意到我实际上可以加载我的 child select 选项 只有当 我不尝试两次调用我的一次服务。也许我误解了承诺？我以为他们用 .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

有同样的问题，解决方案是根据 this answer.

将 angular-mocks.js 更新到匹配的版本

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

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

javascript

events

select

undefined

angularjs