Question

我的客户位于中国，需要在那里工作的专业验证码。我需要使用的验证码是https://open.captcha.qq.com/

基本上有4个步骤可以让它发挥作用：

在html的标签中，添加以下行：

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

将id和属性添加到我们要激活验证码的任何DOM元素，例如button，div或span。示例代码如下：
```
<button id="TencentCaptcha"
data-appid="2090807227"
data-cbfn="callback"
>验证</button>
```

然后在javascript中创建回调函数：

function callback(res){
    console.log(res)
    if(res.ret == 0){
       alert(res.ticket)   // ticket
   }
}

从回调中，向服务器发出POST请求以验证票证

我正在努力将其整合到使用Angular 1.5.6的UI中。

我的控制器是：

.controller('MyCtrl', function($scope) {
  $scope.oldCallback = function(){
    console.log('in the old callback');
  };

  $scope.newCallback = function(){
    // PASS THIS AS THE CALLBACK TO NEW REGISTER BUTTON
  };
})

我创建了一个CodePen here。

我可以远程工作的唯一方法是，如果我传入HTML中的方法，例如

  <button type="submit" id="TencentCaptcha"
   data-appid="2090807227"
   data-cbfn="(function(res){alert('res is ' + res)})">
    Register
  </button>

点击注册后，验证码库会向用户显示一个带有挑战的弹出窗口。完成后，将执行传递给data-cbfn的回调。如何通过此回调调用我的控制器方法，并通过结果？

Answer 1

我创建了一个全局函数，然后能够在控制器中调用正确的方法：

function callback(){
    var scope = angular.element(document.getElementById("home")).scope();
    scope.register();
}

Answer 2

你也可以从角度控制器中将你的功能添加到窗口中：

.controller('MyCtrl', function($scope, $window) {

  $window.callback = function callback(res) {
      $scope.register();
  };
});

这样您就不必请求稍后可能更改范围或ID的文档元素。

另外：$compileProvider.debugInfoEnabled(false);实际上会禁用从您已完成的文档元素中检索作用域的功能。

出于性能和安全原因，您应该在生产模式下关闭debugInfo功能。

将角度1控制器范围方法作为回调传递给验证码库

2 个答案: