AngularJS: TypeError: undefined не является функцией с целыми выборами

Question

У меня есть два поля выбора, сразу же загружаются параметры для одного из полей, а второй (дочерний) выбирает его параметры из обратного вызова, который запрашивает API , Невозможно предварительно загрузить все возможные параметры, потому что есть 4200 записей, которые будут загружены без выбранного родительского значения.

Когда событие нг-изменение родительского ящика пожаров, вызов сделан:

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

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

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

я могу назвать это с помощью NG-инициализации, или непосредственно в контроллере при первой загрузке

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

иЛИ можно назвать это таким же образом (нг-инициализации или непосредственно через контроллер)

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

Но я не могу назвать два вместе, либо через ng-change, либо через прямой контроллер, заставляющий идентификатор категории в вызове 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> 

Даже если я пытаюсь загрузить параметры для ребенка выбрать изначально (а не через событие нг смены) - я получаю ту же ошибку , Вот следы стека 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.