Question

在刷新页面之前不会呈现验证码

我在我的angular js项目中使用Recaptcha来获取安全性。我只是通过以下步骤实现了验证码： 1.我将以下链接添加到我的页面（在每个样式和脚本文件之前的head标签中）：

   <script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>

2。在我的表单中，我添加了验证码

 <div class="g-recaptcha" data-sitekey="my_site_key"></div>

所以我的页面是这样的

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
       <script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="my_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

显然，一切都很好，但是Recaptcha直到我刷新页面后才呈现。实际上，当ajax请求页面时，它将无法工作，但是在页面重新加载后，Recaptcha将在页面上呈现！

那么我该如何使用第一个渲染器来渲染Recaptcha？

Answer 1

我知道如何解决此问题。而不是添加此脚本

 <script src="https://www.google.com/recaptcha/api.js?hl=fa" async ></script>

对于布局页面，我将其添加到我要呈现验证码的每个页面中，因此在路由到特殊页面后，此外，要呈现页面内容验证码也将为我们呈现。

例如，内容页面模板将如下所示：

contactus.html内容

<script src="https://www.google.com/recaptcha/api.js?hl=fa" async></script>
<form name="contactUsForm" novalidate>
    <section class="well">

        <div class="form-horizontal form-widgets col-sm-6">
            <div class="form-group has-feedback" ng-class="{'has-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'has-success': !contactUsForm.firstName.$error.required }">
                <label class="control-label col-sm-4" for="firstName">Name</label>
                <div class="col-sm-8 col-md-6">
                    <input type="text" id="firstName" name="firstName" ng-model="contactUs.firstName" class="form-control" ng-class="{'form-control-error': contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty, 'form-control-success': !contactUsForm.firstName.$error.required }" placeholder="Name" required />
                    <span ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                    <span ng-show="!contactUsForm.firstName.$error.required" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    <div class="text-danger" ng-show="contactUsForm.firstName.$error.required && contactUsForm.firstName.$dirty">Name is required</div>
                </div>
            </div>      
        <div class="form-horizontal form-widgets col-sm-12 col-sm-offset-2" style="display: flex;justify-content: flex-start;margin-bottom: 2rem;">
            <div class="g-recaptcha" data-sitekey="my-sitekey"></div> <!-- Server -->
            <!--<div class="g-recaptcha" data-sitekey="my-sitekey"></div>--> <!-- Local -->
        </div>
        <div class="buttons-wrap col-sm-offset-2" style="text-align:right;padding-right:1.6rem">
            <button class="btn btn-primary" ng-disabled="contactUsForm.$invalid" data-toggle="modal" data-target="#confirmModal"><i class="glyphicon glyphicon-save"></i><span>&submit</span></button>
        </div>

    </section>
</form>

Recpatcha直到Angular JS中的刷新页面才会渲染

1 个答案: