2014-12-22 4 views
1

각도 응용 프로그램에서 양식은 사용자 지정 JS 함수를 통해 제출되기 전에 유효성이 검사됩니다. 조건에 따라 사용자에게 확인 대화 상자를 표시하고 확인 또는 거부를 기다린 다음 유효성 검사를 진행해야합니다. 이 비동기식으로 달성하는 데 어려움이 있습니다. 나는 약속을 올바르게 사용하지 않고 있지만 무엇을 업데이트해야하는지 확신하지 못한다고 생각합니다.AngularJS 유효성 확인 및 약속

공장

app.factory("confirmDialogService", ['$q', 'ngDialog', 
    function ($q, ngDialog) { 
    return { 
    popConfirm: function() { 
     var deferred = $q.defer(); 
     var confirmed; 
     setTimeout(function() { 
       ngDialog.openConfirm({ 
        template: 'template/confirmDialog.html', 
        className: 'ngdialog-theme-default' 
       }).then(function (value) { 
        console.log('Modal promise resolved. Value: ', value); 
        deferred.resolve(confirmed = true); 
       }, function (reason) { 
        console.log('Modal promise rejected. Reason: ', reason); 
        deferred.reject(confirmed = false); 
       }); 
     }, 1000); 
     return deferred.promise; 
     } 
    }; 
}]); 

컨트롤러

$scope.checkSomething = function(){ 
    if(needsConfirmation) 
    { 
     console.log('about to pop confirm'); 
     confirmationService.popConfirm().then(function(confirmed){ 
      console.log('from popConfirm() ' + confirmed + ''); // never logged 
      return confirmed; 
     }, function(){ 
     // something went wrong 
      return false; 
     }); 
    } 
    else 
     return true; 
} 

확인은 대화 상자가 표시됩니다 만, 예를 클릭하거나 예상대로 대화 상자에서 어떤 결과를 생성하지 않습니다. 내가 할 수 있도록하고 싶습니다 무엇

사용자가 내가이 점을 래핑 할 필요가 있다고 생각

var canProceed = $scope.checkSomething(); 

의 라인을 따라, 확인 또는 대화 상자를 기각 여부에 따라 참/거짓 값을 얻을 수있다 또 다른 약속이지만 확실하지는 않습니다. 도움이 될 것입니다.

감사합니다, openConfirm 이후

+0

정말 setTimeout이 필요합니까? – dfsq

+0

@ dfsq : 나는 그렇지 않다고 생각하지만 여전히 문제는 남아 있습니다. –

+0

@me_ 그래도 좋을까요? 'setTimeout'은 여기에 목적을 제공합니까? (약속을 지키면 걱정할 필요가 없습니다.) –

답변

3

이미 약속을 반환, 당신은 $q.defer() 하나 더 만들 필요가 없습니다 :

app.factory("confirmDialogService", ['$q', 'ngDialog', function ($q, ngDialog) { 
    return { 
     popConfirm: function() { 
      return ngDialog.openConfirm({ 
       template: 'template/confirmDialog.html', 
       className: 'ngdialog-theme-default' 
      }).then(function (value) { 
       console.log('Modal promise resolved. Value: ', value); 
       return true; 
      }, function (reason) { 
       console.log('Modal promise rejected. Reason: ', reason); 
       return false; 
      }); 
     } 
    }; 
}]); 

을 그 checkSomething이 이런 식으로 사용합니다 후 :

$scope.checkSomething = function() { 
    if (needsConfirmation) { 
     return confirmationService.popConfirm().then(function (confirmed) { 
      return confirmed; 
     }, function() { 
      return false; 
     }); 
    } else { 
     return $q.when(true); 
    } 
} 

더 이상 true 또는 false을 반환하는 것이 아니라 약속 객체입니다. 마지막으로 당신은 약속 비동기 작업처럼 $scope.checkSomething()을 사용해야합니다

$scope.checkSomething().then(function() { 
    // ok, proceed 
}, function() { 
    // something failed 
}); 

요약하기는, 가장 중요한 것은 checkSomething이 약속을 반환하고 거짓/단지 사실이 아니다 것을 이해 할 수 있습니다.

+0

감사합니다. @ dfsq가 매우 도움이됩니다. Plunkr을 설정하려고하는데, 더 쉬울 수도 있습니다. –

+0

@me_ 코드에 실수가있어서 업데이트가되었는지 확인하고 작동하는지 확인하십시오. – dfsq

+0

덕분에, 잘 작동, 나는 지금 여기에 설명 된대로 체인을 연결하려고합니다 : http : // stackoverflow.com/questions/27605881/chaining-promises-in-anglesjs –

0

당신은 resolvereject 방법에 그것을 전달하는 변수가 필요하지 않습니다 (하지만 작동) :

  .then(function (value) { 
       console.log('Modal promise resolved. Value: ', value); 
       deferred.resolve(true); 
      }, function (reason) { 
       console.log('Modal promise rejected. Reason: ', reason); 
       deferred.reject(false); 
      }); 

를 다음 컨트롤러 :

$scope.checkSomething = function(){ 
    if(needsConfirmation) 
    { 
     console.log('about to pop confirm'); 
     confirmationService.popConfirm().then(function(confirmed){ 
      console.log('from popConfirm() ' + confirmed + ''); // never logged 
      return confirmed; <-- this is not(!) a return of checkSomething method, this is return of success callback 
     }, function(){ 
     // something went wrong 
      return false; //same as above 
     }); 
    } 
    else { 
     return true; 
    } 
} 

그래서 당신은 var canProceed = $scope.checkSomething(); 할 수 없습니다

0 :

당신은 콜백 내부에이 변수를 설정할 필요가

관련 문제