谷歌的Recaptcha不是UI自舉模式工作

這裏是我的HTML：谷歌的Recaptcha不是UI自舉模式工作

我在我的HTML，我增加了驗證碼元素添加comments。

<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>

這是我的AngularJS代碼：

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

來源

2016-06-07 JunM

您需要ŧ o在指令中手動初始化它。對於這個 – charlietfl

@charlietfl現在還沒有可用的模塊，現在我正嘗試使用'templateURL'將它添加到指令中。我的模板中顯示了一些元素，但驗證碼不會顯示。我仍然試圖弄清楚。 – JunM

好吧，這是我如何能夠證明google recaptcha在我的模式。

這裏是我的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>

然後，這裏是我的angular代碼：

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

來源

2016-06-07 03:58:35 JunM

谷歌的Recaptcha不是UI自舉模式工作

回答

相關問題