シンプルキャプチャをディレクティブにリロードする方法は？

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

すべてが正常に見えます、 oを除くネ。

ポップアップを閉じた後、別のポップアップを開くと、キャプチャが読み込まれず、非常に奇妙です。

ポップアップを閉じた後にキャプチャをリロードする方法はありますか？

ありがとうございました

Answer 1

1つか2つのものを更新する必要があります。指示文のコントローラ&のスコープ変数でcheckvalidity関数を持つことができないようにするために、指示文$scope.$apply()のcheckvalidity関数で$ digestサイクルを実行中に実行させて$ applyのこの明示的呼び出しを削除します。また、$('#popup-second').bPopup()呼び出しは実際にディレクティブを再レンダリングしないので、常にディレクティブの最初のロード結果を表示します。だからあなたができることは、あなたのビュー内のそのディレクティブ要素にng-ifを持っていることです。は、それをonClose & の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機能としてディレクティブ内：だから、このようディレクティブで

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

：

$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のコントローラでトリガーするたびに再作成されます。それで、隔離されたスコープのおかげで、期待通りの結果が得られます。同じ見方や異なる視点で複数回再利用することができます。

Working plunker