Question

我在使用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：

$('#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();
});

一切看起来很好，除了一件事。

关闭弹出窗口后，我打开另一个弹出窗口，它没有重新加载验证码，这很奇怪。

关闭弹出窗口后如何重新加载验证码的任何想法？

由于

Answer 1

您只需要更新一两件事。在指令$scope.$apply()的checkvalidity函数中导致$ digest循环在它已经在进行时运行，所以打破它，以避免你可以在指令控制器＆amp ;;的范围变量中具有checkvalidity函数。删除显式调用$ apply。此外，由于$('#popup-second').bPopup()调用实际上不会重新呈现指令，因此它始终显示第一次加载指令的结果。所以你可以做的是在你的视图中使用ng-if on the directive元素＆amp;在onClose＆amp;上切换它bPopup（）的onOpen个事件。所以你的模板可以是：

<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();
      }
    });
});

因此，每次触发时都会重新创建指令。因此，它会给出预期的结果＆amp;多亏了隔离范围，您可以在相同的视图或应用程序的不同视图上多次重复使用它。

Working plunker

如何在指令中重新加载简单的验证码？

1 个答案: