Question

JS包括：

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js
http://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit

AngularJS App：

    var myApp = angular.module('myApp',[]);
    myApp.controller('MyCtrl', ['$scope', function($scope) {
      var items = {
        "lettuce": "2",
        "pear": "2",
        "orange": "3",
        "apple": "1",
        "grapes": "3",
        "banana": "2"
        };  
      $scope.items = items;
    }]);

明确的ReCaptcha回调：

var CaptchaCallback = function(){

    // BUG:
    // how do i make this run as a loop over all the "items" currently being returned from a webservice
    //  without having to specifically type 'captcha_lettuce' or 'captcha_pear' for the captcha to physically find/attach to that DOM element

    grecaptcha.render('captcha_lettuce', {'sitekey' : 'captcha-key-here'});
    grecaptcha.render('captcha_pear', {'sitekey' : 'captcha-key-here'});
    grecaptcha.render('captcha_orange', {'sitekey' : 'captcha-key-here'});
    grecaptcha.render('captcha_apple', {'sitekey' : 'captcha-key-here'});
    grecaptcha.render('captcha_grapes', {'sitekey' : 'captcha-key-here'});
    grecaptcha.render('captcha_banana', {'sitekey' : 'captcha-key-here'});
};

HTML：

<body ng-app="myApp">    

<h3>Items for Sale - Multiple forms</h3>
<div ng-controller="MyCtrl">
    <ul>
        <div ng-repeat="(fruit,price) in items">

            {{fruit}}: ${{price}}<br/>

            First Name:<input type='text'/><br/>
            Last Name:<input type='text'/>
            <div id="captcha_{{fruit}}"></div>
            <input type='submit'/><br/><br/><br/>                

        </div>
    </ul>
</div>

</body>

Answer 1

当ViewHolder在DOM上创建元素时，您需要一个自定义指令来调用View函数。

grecaptcha.render

JS

ng-repeat

有关详细信息，请访问AngularJS Guide for Creating Custom Directives。

Answer 2

非常感谢！最终的工作答案是：

 <div id="captcha{{$index}}" class="g-recaptcha"></div>

angular.module("MainApp").directive("gRecaptcha", function(){
return {
    restrict:  'C',
    link: function($scope, $element, attr){
        grecaptcha.render($element[0], {'sitekey' : 'site-key-here'});
    }
};

}）;

如何将多个recaptcha附加到ng-repeat（ed）结果？

2 个答案: