각도, 약속, 텍스트 영역에서 foreach 및 처리 순서 유지

Question

각도를 처음 사용하지만 프로그래밍이 필요하지 않습니다. 늙은 개에게 새로운 트릭을 가르치려는 것.

사용자가 조회 할 사전 단어 목록을 입력하는 텍스트 영역이 있습니다. $ http get을 통해 API를 사용하는 곳은 현재 3 곳이며 API의 응답을 가져옵니다. 말 내가 텍스트 영역에 다음이 있습니다

computer 
fragment 
teleport 

그것은 텍스트 영역을 통해 루프 및 각 단어에 대해 "lookupWord()"실행됩니다. 3 가지 API 결과가 모두 결합되어 있으며 고유 한 ID를 생성하고 개체 상단에 단어를 포함시킵니다. 이것은 결과를 테이블에 넣고 테이블 행의 (tr) id를 생성 한 고유 ID로 만들 수 있습니다. 각 행에 대한 "보기"버튼이 있습니다.이 버튼을 클릭하면 모든 세부 정보가있는 모달이 나타납니다. 이 프로세스는 객체 배열에서 특히 중복 된 단어가있는 경우 결과를 일치시키는 것이 매우 간단합니다.

내 문제

내는 지금 끊지 텍스트 영역을 통해 루핑 및 처리 순서를 유지하고있다. 그들이 시작 버튼을 클릭 할 때, 나는 폼의 텍스트 영역과 체크 박스를 사용하지 않으려 고하므로 처리 중에는 아무것도 바꿀 수 없습니다. 작업이 완료되면 양식을 잠금 해제하고 사용자에게 경고를 보내야합니다.

아직 요소를 사용하지 않도록 설정하지 않았지만 루프가 끝나고 각 단어를 찾은 후에 "완료"라고 말하도록하려고합니다.

<textarea ng-model="wordlistTextarea" ng-list="&#10;" ng-trim="false" class="form-control" id="wordsTextarea" placeholder="words to research..." rows="10"></textarea> 
<input ng-model="checkboxSources.webster" type="checkbox" id="webster-api"> Merriam Webster (Dictionary API) 
<input ng-model="checkboxSources.oxford" type="checkbox" id="oxford-api"> Oxford American College Dictionary (Google) 
<input ng-model="checkboxSources.forvo" type="checkbox" id="forvo-api"> Forvo Pronunciation Dictionary 

<button ng-disabled="!wordlistTextarea" ng-click="startProcessing()" class="btn btn-success" id="pronunciation-submit" preventDefault>Search</button> 

JS

$scope.searchResults = []; // holds array of objects for later use 
$scope.baseApiUri = 'http://apibase.com/api/here'; 
$scope.checkboxSources = { 
    webster : true, 
    oxford : true, 
    forvo : true 
}; 

$scope.startProcessing = function() { 
    var promises = []; 
    angular.forEach($scope.wordlistTextarea, function(value, key){ 
     //$scope.lookupWord(value.trim()); 
     promises.push($scope.lookupWord(value.trim())); 
    }); 

    $q.all(promises).then(function(results) { 
     console.dir(results); 
    }) 
    .then(function(data) { 
     console.log('DONE!!'); 
    }); 
}; 

$scope.lookupWord = function($word) { 
    Q.all([$scope.getWebster($word), $scope.getOxford($word), $scope.getForvo($word)]) 
    .spread(function (resultWebster, resultOxford, resultForvo) { 
     var randomId = $scope.getRandomId(); 
     var result = { 
      'word': $word, 
      'id': randomId, 
      'sources': { 
       'webster': resultWebster.data, 
       'oxford': resultOxford.data, 
       'forvo': resultForvo.data, 
      }, 
     }; 
     $scope.addToResults(result); 
    }) 
    .done(); 
}; 

$scope.downloadPart = function(myUrl) { 
    return $http({ 
     method: 'GET', 
     url: myUrl, 
    }); 
}; 

$scope.addToResults = function(data) { 
    console.log('Adding Result:'); 
    console.dir(data); 
    $scope.searchResults.push(data); 
}; 

// -- API SOURCES -- 

$scope.getWebster = function(word) { 
    if ($scope.checkboxSources.webster == true) { 
     var url = $scope.baseApiUri + '/dictionary?word=' + word; 
     return $scope.downloadPart(url); 
    } else { 
     return null; 
    } 
}; 

$scope.getOxford = function(word) { 
    if ($scope.checkboxSources.oxford == true) { 
     var url = $scope.baseApiUri + '/oxford?word=' + word; 
     return $scope.downloadPart(url); 
    } else { 
     return null; 
    } 
}; 

$scope.getForvo = function(word) { 
    if ($scope.checkboxSources.forvo == true) { 
     var url = $scope.baseApiUri + '/forvo?word=' + word; 
     return $scope.downloadPart(url); 
    } else { 
     return null; 
    } 
}; 

개요 다시

HTML : 모든 것이 실제로 여기에

몇 가지 코드 :(완료되기 전에 그것은 "완료"보고서 내 문제는버튼을 클릭했을 때입니다., 물건을 먼저 처리 (양식 사용 중지)하고 텍스트 영역을 반복하며 단어를 찾아야합니다. 완료되면 더 많은 작업을 수행해야합니다 (양식에 요소 사용, 완료 완료 알림 등).

또한 Angular에 포함 된 $ q에 대해 Q (라이브러리가 포함되어 있음)을 바꾸고 싶습니다. spread이 있으므로 Q을 사용했습니다. 보시다시피, 나는 스프레드를 사용하여 특별히 결과를 객체에 넣습니다. $q.all() 대신 $result[0], $result[1], etc을 사용할 수 있는지 잘 모르겠습니까?

질문이 있으시면 알려주세요. 나는 아이들을 속이거나 대우하려고하기 때문에 이것을 빨리 썼다. :)

미리 감사드립니다!

추 신 : 나쁜 각도에서 나를 바로 잡는 것이 좋습니다. 어떻게하면 좋을까요 (정확하게).

Answer 1

문제는 약속 배열이 실제로 promises의 배열이 아니라는 것입니다. lookupWord 함수는 작성한 약속을 반환해야 감시 할 수 있습니다.

작성한 약속에 return을 추가하기 만하면됩니다.

$scope.lookupWord = function($word) { 
    return Q.all([$scope.getWebster($word), $scope.getOxford($word), $scope.getForvo($word)]) 
    .spread(function (resultWebster, resultOxford, resultForvo) { 
     var randomId = $scope.getRandomId(); 
     var result = { 
      'word': $word, 
      'id': randomId, 
      'sources': { 
       'webster': resultWebster.data, 
       'oxford': resultOxford.data, 
       'forvo': resultForvo.data, 
      }, 
     }; 
     $scope.addToResults(result); 
    }) 
    .done(); 
};