here's html:
i added comments on html added captcha element.
<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"> <!-- 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 modal!</h3> </div> <div class="modal-body"> <h1> captcha here!</h1> <!-- 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>and here's 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 $uibmodalinstance represents modal window (instance) dependency. // not same $uibmodal service used above. angular.module('testapp').controller('modalinstancectrl', function ($scope, $uibmodalinstance) { $scope.ok = function () { $uibmodalinstance.dismiss(); }; $scope.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; });
okay, how able show google recaptcha in modal.
here's 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 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>then, here's 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 $uibmodalinstance represents modal window (instance) dependency. // not same $uibmodal service used above. angular.module('testapp').controller('modalinstancectrl', function ($scope, $uibmodalinstance) { $scope.ok = function () { $uibmodalinstance.dismiss(); }; $scope.cancel = function () { $uibmodalinstance.dismiss('cancel'); }; });