홈>2020-02-25 23:06

javascript - 지시문에서 간단한 보안 문자를 다시로드하는 방법은 무엇입니까?

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>&nbsp;{{operation}}&nbsp;<input ng-model="b.value" ng-show="b.input" style="width:2em; text-align: center;"><span ng-hide="b.input">{{b.value}}</span>&nbsp;=&nbsp;{{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();
});

한 가지를 제외하고는 모두 괜찮아 보입니다.

팝업을 닫고 다른 팝업을 연 후에는 보안 문자를 다시로드하지 않았습니다. 매우 이상합니다.

팝업을 닫은 후 보안 문자를 다시로드하는 방법에 대한 아이디어가 있습니까?

감사합니다

javascriptjqueryangularjsbpopup

답변 # 1
한두 가지만 업데이트하면됩니다. 지시문 $scope.$apply() 의 검사 유효성 기능 지시어 컨트롤러의 스코프 변수에 checkvalidity 기능이 있고 $apply의 명시 적 호출을 제거하지 못하도록 $digest 사이클이 이미 진행 중일 때이를 실행하여 중단시킵니다. 또한 $('#popup-second').bPopup() 로 호출은 지시문을 실제로 다시 렌더링하지 않으므로 항상 처음로드 된 지시문 결과를 표시합니다. 그래서 당신이 할 수있는 일은 뷰의 지시문 요소에 ng-if가 있고 onClose 에서 토글하는 것입니다. & onOpen bPopup ()의 이벤트. 따라서 템플릿은 다음과 같습니다.
```
<div id="popup-second" style="display: none">
    <div> From Controller : {{mymodel.captchaValid}}
    </div>
    <div ng-if="show">
      <simple-captcha valid="mymodel.captchaValid"></simple-captcha>
    </div>
</div>
```
지시문 내의 checkvalidity 함수를 다음과 같이 업데이트하십시오 :
```
$scope.checkValidity = function() {
    if (a.value && b.value) {
      var calc = int(a.value) + int(b.value);
      $scope.valid = calc == result;
    } else {
      $scope.valid = false;
    }
};
$scope.$watch('a.value', function(){    
    $scope.checkValidity();
});
$scope.$watch('b.value', function(){    
    $scope.checkValidity();
});
```
뷰 컨트롤러에서 bPopup을 다음과 같이 호출하십시오.
```
$('#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({
      onOpen: function() {
        $scope.show = true;
        $scope.$digest();
      },
      onClose: function() {
        $scope.show = false;
        $scope.$digest();
      }
    });
});
```
이런 식으로 지시문은 트리거 할 때마다 다시 작성됩니다. 따라서 예상 결과를 제공하며 격리 된 범위 덕분에 앱의 동일한보기 또는 다른보기에서 여러 번 재사용 할 수 있습니다.

플런저 작업

Python2.net

javascript - 지시문에서 간단한 보안 문자를 다시로드하는 방법은 무엇입니까?

관련 자료