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

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

所有看起来不错，除了o ne的东西。

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

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

谢谢

Answer 1

你只需要更新一两件事。在指令$scope.$apply()的指令$scope.$apply()的checkvalidity函数中，导致$ digest循环在它正在进行时运行，因此打破它，以避免您可以在指令的控制器&的范围变量中具有checkvalidity函数，从而删除此显式调用$ apply。另外，由于$('#popup-second').bPopup()调用实际上不会重新呈现该指令，因此它始终显示指令的首次加载结果。所以你可以做什么，如果在你的视图&的指令元素切换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(); 
     } 
    }); 
}); 

因此，在这样的指令每次触发时都会重新创建。所以它会给出预期的结果&感谢孤立的范围，您可以在同一视图或应用程序的不同视图上多次重复使用它。

Working plunker