angularjs - Angularjs - 在没有 ng-model 的元素上使用 $watch

Question

我正在尝试让 recaptcha 与 AngularJS 一起工作（干净）。

recaptcha 正在我的指令中创建。使用回调函数，我试图 $watch 输入中的任何更改（recaptcha_challenge_field，recaptcha_response_field）

我可以将值传递给范围：

scope.recaptcha_challenge_field = "value_taken_from_input_after_creation"

我的问题是，recaptcha 代码是在没有我的情况下创建的，所以我无法向这些输入添加 ng-model。所以当我做一个

scope.$watch('recaptcha_response_field', function(newValue, oldValue) { 
console.log('recaptcha_response_field ' + newValue); 
});

什么都没有发生，因为显然 scope.recaptcha_challenge_field 没有链接到

<input name="recaptcha_response_field" id="recaptcha_response_field" type="text">

我的想法：

1. 向我的输入动态添加一个 ng-model 但我无法弄清楚
2. 将我的值绑定到输入元素并观察它们

接受任何建议。

谢谢

Answer 1

在不知道你用的是哪个recapthca库的情况下，我只能在黑暗中拍摄。但我会做的是

1. 获取var recaptchaElement = angular.element(...)对 recaptcha 的引用
2. 使用将 ng-model 添加到文本输入.attr('ng-model', 'myProp')
3. 在元素上调用 $compile 以便 Angular 知道它：$compile(recaptchaElement)(scope)

理想情况下，这都应该在指令中。如果您制作http://plnkr.co/，我可以提供更多帮助。