AngularJS : TypeError : undefined가 체인화 된 선택 항목이있는 함수가 아닙니다

Question

두 개의 선택 상자가 있고 상자 중 하나에 대한 옵션이 즉시로드되고 두 번째 (하위) 선택에 API를 쿼리하는 콜백에서 해당 옵션이 제공됩니다 . 부모가 선택한 값없이로드되는 레코드가 4200 개이므로 가능한 모든 옵션을 미리로드하는 옵션이 아닙니다.

친 박스 화재의 NG 변경 이벤트는 통화가 이루어질 때 :

가

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-초기화 또는 컨트롤러를 통해 직접)

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

그러나 나는 두 가지를 호출 할 수 없습니다 함께 컨트롤러를 통해 카테고리 변경을 통해 findProducts() 호출에 카테고리 ID를 강제로 변경하거나 직접 호출 할 수 있습니다.

이렇게하면 자식 선택에 "제품"배열을 채울 수 있습니다. 제어 HTML은 (출력이 지시어를 통해 인) 이것이다 : 나는 처음에 (오히려 NG 변경 이벤트를 통해 이상)를 선택 아동에 대한 옵션을로드하려고해도

<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 데이터 샘플입니다. 내가 linted/유효성을 검사하고 괜찮습니다.

[{"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 호출이 좋고 데이터가 예상대로 돌아 왔음에도 불구하고 두 번째 API를 완성하려고 할 때 오류가 발생한다. (위의 JSON 참조)

JQuery 오류에 영향을 미치지 않습니다. jQuery가 포함되거나 포함되지 않은 동일한 재생산이 포함됩니다.

Answer 1

가 솔루션을 찾았습니다. 내가 초기 페이지로드 후 서비스에 전화를한다면, 오류

var deferred = $q.defer(); 

:

이

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

특히, 서비스의 상단에이를주의 사항 : 내 서비스에, 나는이 있었다 내가 부른 실제 기능에서 약속을 연기하지 않았기 때문에 일어날 것입니다. 이것에

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과 일치하는 버전으로 업데이트하는 것과 동일한 문제가 발생했습니다.