홈>
bPopup 플러그인을 사용하여 팝업 대화 상자에서 간단한 보안 문자를 사용하고 있습니다.
보안 문자 코드를이 jsfiddle에 참조 할 수 있습니다 : https://jsfiddle.net/Mazzu/hspxaeqa/
HTML :
<span id="popup-button-email">Click Here!</span>
<div id="popup-second"> <a class="b-close">x<a/>
<simple-captcha valid="captchaValid"></simple-captcha>
</div>
JS :
app.directive('simpleCaptcha', function() {
return {
restrict: 'E',
scope: { valid: '=' },
template: '<input ng-model="a.value" ng-show="a.input" style="width:2em; text-align: center;"><span ng-hide="a.input">{{a.value}}</span> {{operation}} <input ng-model="b.value" ng-show="b.input" style="width:2em; text-align: center;"><span ng-hide="b.input">{{b.value}}</span> = {{result}}',
controller: function($scope) {
var show = Math.random() > 0.5;
var value = function(max){
return Math.floor(max * Math.random());
};
var int = function(str){
return parseInt(str, 10);
};
$scope.a = {
value: show? undefined : 1 + value(4),
input: show
};
$scope.b = {
value: !show? undefined : 1 + value(4),
input: !show
};
$scope.operation = '+';
$scope.result = 5 + value(5);
var a = $scope.a;
var b = $scope.b;
var result = $scope.result;
var checkValidity = function(){
if (a.value && b.value) {
var calc = int(a.value) + int(b.value);
$scope.valid = calc == result;
} else {
$scope.valid = false;
}
$scope.$apply(); // needed to solve 2 cycle delay problem;
};
$scope.$watch('a.value', function(){
checkValidity();
});
$scope.$watch('b.value', function(){
checkValidity();
});
}
};
});
팝업 :
$('#popup-button-email').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#popup-second').bPopup();
});
한 가지를 제외하고는 모두 괜찮아 보입니다.
팝업을 닫고 다른 팝업을 연 후에는 보안 문자를 다시로드하지 않았습니다. 매우 이상합니다.
팝업을 닫은 후 보안 문자를 다시로드하는 방법에 대한 아이디어가 있습니까?
감사합니다
- 답변 # 1
관련 질문
- javascript : AngularJs를 사용하여 Div 콘텐츠 인쇄
- javascript : AngularJS 및 Stripe : 서버에 토큰 보내기, 양식에 토큰 삽입
- javascript : 축소판 이미지를 캡처하려고 할 때 변경 사항에 jquery가 아무것도하지 않음
- javascript : 요소가 존재할 때까지 함수 대기
- 충돌하는 Javascript를 해결하는 방법은 무엇입니까?
- javascript : JQuery .on ( "click", functionName)이 실행되지 않음
- javascript : jQuery '$'는 항상 정의되지 않습니다.
- javascript : 자바 스크립트, 텍스트가 실제로 선택되었는지 감지
- javascript : Jquery의 해당 상자에 검색 필터 적용
- javascript : 조건이 충족 될 때 UI 구성 요소 숨기기
한두 가지만 업데이트하면됩니다. 지시문
$scope.$apply()
의 검사 유효성 기능 지시어 컨트롤러의 스코프 변수에 checkvalidity 기능이 있고 $apply의 명시 적 호출을 제거하지 못하도록 $digest 사이클이 이미 진행 중일 때이를 실행하여 중단시킵니다. 또한$('#popup-second').bPopup()
로 호출은 지시문을 실제로 다시 렌더링하지 않으므로 항상 처음로드 된 지시문 결과를 표시합니다. 그래서 당신이 할 수있는 일은 뷰의 지시문 요소에 ng-if가 있고onClose
에서 토글하는 것입니다. &onOpen
bPopup ()의 이벤트. 따라서 템플릿은 다음과 같습니다.지시문 내의 checkvalidity 함수를 다음과 같이 업데이트하십시오 :
뷰 컨트롤러에서 bPopup을 다음과 같이 호출하십시오.
이런 식으로 지시문은 트리거 할 때마다 다시 작성됩니다. 따라서 예상 결과를 제공하며 격리 된 범위 덕분에 앱의 동일한보기 또는 다른보기에서 여러 번 재사용 할 수 있습니다.플런저 작업