Google Recaptcha nicht auf ui Bootstrap-modale Arbeits

Hier ist meine HTML:Google Recaptcha nicht auf ui Bootstrap-modale Arbeits

Ich habe comments auf meinem HTML, wo ich das Captcha-Element hinzugefügt.

<html> 
 

 
<head> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
    <script src="app.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
 

 

 
</head> 
 

 
<body ng-app="testApp"> 
 
    
 
    <!-- this will display --> 
 
    <div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"></div> 
 
    
 
    <div ng-controller="ModalDemoCtrl"> 
 
     <script type="text/ng-template" id="ModalView.html"> 
 
      <div class="modal-header"> 
 
       <h3 class="modal-title">I'm a modal!</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <h1> Captcha here!</h1> 
 
       
 
       <!-- this will not display --> 
 
       <div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"></div> 
 
       
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
       <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
      </div> 
 
     </script> 
 

 
     <button type="button" class="btn btn-default" ng-click="triggerModal()">Trigger Modal</button> 
 

 
    </div> 
 

 
</body> 
 

 

 
</html>

Und hier ist mein AngularJS Code:

angular.module('testApp', ['ngAnimate','ui.bootstrap']); 
 
angular.module('testApp').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 
 
    
 
    
 
    $scope.triggerModal = function(){ 
 
     $scope.open(); 
 
    } 
 

 

 
    $scope.animationsEnabled = true; 
 

 
    $scope.open = function (size) { 
 

 
    var modalInstance = $uibModal.open({ 
 
     animation: $scope.animationsEnabled, 
 
     templateUrl: 'ModalView.html', 
 
     controller: 'ModalInstanceCtrl' 
 
    }); 
 

 
    modalInstance.result.then(function (result) { 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
    }); 
 
    }; 
 

 
    $scope.toggleAnimation = function() { 
 
    $scope.animationsEnabled = !$scope.animationsEnabled; 
 
    }; 
 

 
}); 
 

 
// Please note that $uibModalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $uibModal service used above. 
 

 
angular.module('testApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) { 
 

 
    $scope.ok = function() { 
 
    $uibModalInstance.dismiss(); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
});

Quelle

2016-06-07 JunM

Sie würden t brauchen o initialisiere es manuell in einer Direktive. Wäre nicht überrascht, dass ein Modul dafür nicht schon verfügbar ist – charlietfl

@charlietfl Ich versuche gerade, es in der Direktive mit 'templateURL' hinzuzufügen. Einige Elemente in meiner Vorlage wurden angezeigt, aber das Captcha wird nicht angezeigt. Ich versuche es immer noch herauszufinden. – JunM

Okay, das ist, wie ich in der Lage war mein modal zu zeigen google recaptcha in.

Hier ist mein index.html

<html> 
 

 
<head> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script> 
 
    <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script> 
 
    <script src="app.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 

 

 
</head> 
 

 
<body ng-app="testApp"> 
 
    
 
    <div ng-controller="ModalDemoCtrl"> 
 
     <script type="text/ng-template" id="ModalView.html"> 
 
      <div class="modal-header"> 
 
       <h3 class="modal-title">I'm a modal!</h3> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <!-- Insert captcha here --> 
 
       <my-template></my-template>     
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
       <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
      </div> 
 
     </script> 
 

 
     <button type="button" class="btn btn-default" ng-click="triggerModal()">Trigger Modal</button> 
 

 
    </div> 
 

 
</body> 
 

 

 
</html>

Dann ist hier mein angular Code:

angular.module('testApp', ['ngAnimate', 'ui.bootstrap']); 
 
angular.module('testApp').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) { 
 

 

 
    $scope.triggerModal = function() { 
 
     $scope.open(); 
 
    } 
 

 

 
    $scope.animationsEnabled = true; 
 

 
    $scope.open = function (size) { 
 

 
     var modalInstance = $uibModal.open({ 
 
      animation: $scope.animationsEnabled 
 
      , templateUrl: 'ModalView.html' 
 
      , controller: 'ModalInstanceCtrl' 
 
     }); 
 

 
     modalInstance.result.then(function (result) {}, function() { 
 
      $log.info('Modal dismissed at: ' + new Date()); 
 
     }); 
 
    }; 
 

 
    $scope.toggleAnimation = function() { 
 
     $scope.animationsEnabled = !$scope.animationsEnabled; 
 
    }; 
 

 
}) 
 

 
.directive('myTemplate', function() { 
 
    return { 
 
     restrict: 'E', 
 
     link: function(scope, element, attrs) { 
 
      var s = document.createElement('script'); 
 
      s.src = 'https://www.google.com/recaptcha/api.js'; 
 
      document.body.appendChild(s); 
 
     }, 
 
     template: '<div class="g-recaptcha" data-sitekey="6Lff8CETAAAAAA6CU-8CQYEzfQq7vXIxUmvyRR0w"></div>' 
 
    }; 
 
}); 
 

 
// Please note that $uibModalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $uibModal service used above. 
 

 
angular.module('testApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) { 
 

 
    $scope.ok = function() { 
 
     $uibModalInstance.dismiss(); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
     $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
});

Quelle

2016-06-07 03:58:35 JunM

Google Recaptcha nicht auf ui Bootstrap-modale Arbeits

Antwort

Verwandte Themen