从指令中调用 angularjs watch 中的 $http

Question

我正在尝试从我的指令中的手表内部调用 $http 服务。假设指令被放置在多个输入元素上。如果所有元素的值一起改变，watch 会背对背触发并且 $http 也会被背对背调用，有时会弄乱每个 $http 调用的响应，即连续的 $http 调用，即使输入不同反应是一样的。为这种情况构建代码的正确方法是什么？我可以使用 promise 来解决这个问题吗？如果是，那么如何，考虑到这是相同的 $http 调用，使用不同的输入进行调用。

 Utils.directive('setDescription', function ($q,$http,$timeout) {
                var directive = {};
                directive.priority = 1;
                directive.restrict = 'A'; 
                directive.require = 'ngModel';
                directive.link = function(scope,element,attributes,ngModel) {
                    scope.isInput = false;
                    scope.getDescription = true;
                    scope.elementArray = [];
                    element.bind("keypress", function (event) {
                       scope.isInput = true;
                       return true; 
                    });

                    scope.$watch(function(){
                        var codeElem = element.next();
                        if(codeElem[0]!=undefined){
                            codeElem=codeElem[0];
                        }
                        return scope.gettheObject(codeElem.name,scope);
                    },function(newValue,oldValue){
                        if(!scope.isInput && scope.getDescription){
                          if(newValue!=undefined && (newValue.trim())!=""){
                            $timeout(function() {
                                element.val(newValue);       
                                scope.elementArray.push(element);
                                $http({
                                    method: 'POST', 
                                    url: Constants.BASE_REST_URL + '/picklist/pickListResultGeneric',                   
                                    data : CryptoHelperService.getEncryptedData(searchstr,true),
                                    headers: CryptoHelperService.getEncryptionHeaders(),
                                    cache: false,
                                    xsrfCookieName : 'nicAccessCookie'
                                }).then(function(response) {
                                    response.data = CryptoHelperService.getDecryptedResponse(response.data,response.headers);
                                });
                            });
                          }
                        }   
                    });
                }
                return directive;
            });

Answer 1

借助 promise 解决。使用 $q.when()（与 $q.resolve() 相同），创建一个立即用给定值解决的承诺。对于数组中的每个元素，构建 $http 调用并将其添加到承诺链中。遍历所有元素后，将按照它们在链中添加的相同顺序调用每个调用。

 var promiseChain = $q.when();
    scope.elementArray.forEach(function(elem) {
          //Initiate a chain of promises for each REST call
           promiseChain = promiseChain.then(function() {
             return $http({
                            method: 'POST', 
                            url: someURL,       
                            data : someData
                        });
           });  
           //Each promise in the chain is then resolved individually in the order in which they were invoked.
           promiseChain.then(function(response) {
                //do stuff here after each call returns individually                
           });                      
    });

从指令中调用 angularjs watch 中的 $http

Calling $http inside angularjs watch from a directive

angularjs

angularjs-directive

angular-promise