세 가지 상태가있는 제출 버튼이있는 문의 양식을 만들고 있습니다.
버튼의 HTML은 다음과 같습니다.
<button type="submit" class="btn btn-default" ng-class="{'btn-success':
stateText === 'Sent'}" ng-click="submit()">{{stateText}}</button>
다음은 컨트롤러 코드입니다.
angular.module('contact')
.controller('contactController', function($scope) {
$scope.data = {
fullName: undefined,
email: undefined,
phone: undefined,
message: undefined,
};
$scope.noEmailProvided = undefined;
$scope.emailSent = undefined;
$scope.stateText = 'Send';
$scope.submit = function() {
if (!$scope.data.email) {
$scope.noEmailProvided = true;
return;
}
$scope.stateText = 'Sending';
emailjs.send("server","contactus", {
fullName: $scope.data.fullName,
email: $scope.data.email,
phone: $scope.data.phone,
message: $scope.data.message
})
.then(function(response) {
$scope.emailSent = true;
$scope.stateText = 'Sent';
console.log("SUCCESS. status=%d, text=%s", response.status, response.text);
}, function(err) {
console.log("FAILED. error=", err);
});
}
});
초기 "Send"상태는 작동하고 두 번째 "Sending"상태는 작동하지만 요청이 성공적으로 반환 될 때 변경 될 것으로 예상되는 "Sent"상태는 작동하지 않습니다. 중단 점을 설정했고 $scope.stateText할당이 성공적으로 발생했지만 텍스트가 뷰에서 렌더링되지 않습니다.
문제를 식별 할 수있는 Angular 전문가와 함께 문제를 해결했습니다. 버튼을 클릭 할 때 이메일을 보내기 위해 emailJS 라는 타사 서비스를 사용하고 있습니다. 이 제 3자는 Angular의 $ http 서비스를 사용하지 않으므로 요청이 반환 될 때 다이제스트주기를 트리거하지 않습니다. $ scope. $ evalAsync를 호출하면 Angular가 큐에 다이제스트주기를 추가하고 범위를 업데이트하도록합니다. 기능 코드는 다음과 같습니다.
emailjs.send("smtp_server","contactus", {
fullName: $scope.data.fullName,
email: $scope.data.email,
phone: $scope.data.phone,
message: $scope.data.message
})
.then(function(response) {
$scope.$evalAsync(function () {
$scope.emailSent = true;
$scope.stateText = 'Sent';
});
console.log("SUCCESS. status=%d, text=%s", response.status, response.text, $scope.stateText);
}, function(err) {
console.log("FAILED. error=", err);
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다