angularjs – 动态更改Recaptcha V2语言

前端之家收集整理的这篇文章主要介绍了angularjs – 动态更改Recaptcha V2语言前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在角度站点上实现Recaptcha V2.

我正在使用angular translate,我不知道如何使用$scope提供的正确语言重新生成reCaptcha对象

有什么办法吗?或使用正确的lang重新加载对象的过程?

谢谢

根据API的限制,您可以动态加载脚本:

加载脚本的功能

(source)

  1. function loadScript(url,callback)
  2. {
  3. // Adding the script tag to the head as suggested before
  4. var head = document.getElementsByTagName('head')[0];
  5. var script = document.createElement('script');
  6. script.type = 'text/javascript';
  7. script.src = url;
  8.  
  9. // Then bind the event to the callback function.
  10. // There are several events for cross browser compatibility.
  11. script.onreadystatechange = callback;
  12. script.onload = callback;
  13.  
  14. // Fire the loading
  15. head.appendChild(script);
  16.  
  17. //modification so we can remove this after
  18. return script;
  19. }

注意:这是一个常规的JS函数

动态加载脚本

在你的Angular控制器中

  1. $scope.loadGoogleRecaptcha = function (id,lang) {
  2. /// using timeout not to use $apply
  3. $timeout(function () {
  4. //set default value
  5. var elemntID = id || false;
  6. var language = lang || 'en';
  7.  
  8. if (!elemntID) {
  9. console.warn('NO Id selected for re-captcha loading!')
  10. return false;
  11. }
  12.  
  13. var element = document.getElementById(elemntID)
  14. if (angular.element(element).length == 0) {
  15. console.warn('provided id doesn\'t exist ',elemntID);
  16. return false;
  17. }
  18.  
  19. //Delete oldscript
  20. if ($rootScope.addedScript)
  21. angular.element($rootScope.addedScript).remove();
  22.  
  23. //clear current recaptcha container
  24. angular.element(element).empty();
  25.  
  26. var url = "https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=" + lang;
  27.  
  28. return $window.loadScript(url,function () {
  29. console.log('Scipt loaded:',url);
  30. })
  31.  
  32. });
  33.  
  34. }

使用angular-translate-localStorage使用当前语言初始化验证码

  1. $rootScope.addedScript = $scope.loadGoogleRecaptcha('g-recaptcha-register',$window.localStorage.getItem( 'NG_TRANSLATE_LANG_KEY'));

切换语言的功能样本

  1. $rootScope.changeLanguage = function (langKey) {
  2.  
  3. $translate.use(langKey);
  4. $rootScope.selectedLanguage = langKey;
  5. $scope.loadGoogleRecaptcha('g-recaptcha-register',langKey);
  6. };

或者你可以使用观察者

  1. $scope.$watch(
  2. 'selectedLanguage',function (n,o) {
  3. //putting if to prevent double fetch the first time
  4. if (!!n && n != o){
  5. $rootScope.addedScript = $scope.loadGoogleRecaptcha('g-recaptcha-register',n);
  6. }
  7. }
  8. );

猜你在找的Angularjs相关文章