javascript - AngularJS:TypeError:undefined 不是带有链式选择的函数

Question

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

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

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

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

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

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

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

或者我可以用同样的方式调用它(ng-init 或直接通过 Controller )

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

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

反过来，这应该允许使用“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>

即使我最初尝试加载子选择的选项(而不是通过 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"}]

帮助!

我注意到，事实上，仅当我不尝试同时对我的服务进行两次调用时，我才能加载我的 child 选择选项。也许我误解了 promise ？我以为他们用 .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();

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

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

现在它就像一个魅力。