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

Question

我正在尝试使用 AngularJS 使 recaptcha 正常工作。

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. 将我的值绑定(bind)到输入元素并观察它们

接受任何建议。

谢谢

Answer 1

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

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

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