如何在指令中重新加載簡單的驗證碼？

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