在chrome扩展中使用页面的角度JS

Question

我有一个HTML页面,其中有一些DOM配置了Angular.现在我正在构建一个chrome扩展来修改文本框中的值.element.value= newValue因为文本框是使用Angular设计的,所以不起作用.在阅读了一些资源后,我才知道我需要对元素的范围进行更改.我尝试在扩展中执行此操作.

var eleScope = window.angular.element(document.querySelector('.textbox')).scope();
eleScope.$apply(function() {
  eleScope.item.request.box = newValue;
});

这似乎没有按预期工作.当我更深入地研究这个问题时,我开始知道窗口范围内的角度没有得到正确的范围.

我也尝试从我的扩展中注入angular.js并angular.element直接使用,这似乎也没有解决问题.

我错过了什么.感谢您的回复.

Answer 1

嗯..实际上你应该只能使用vanilla Javascript或JQuery更改值,并且不需要更新范围,因为它是双向绑定即.更新视图会更新模型,反之亦然.

模型不更新的唯一原因是因为更新模型的观察者仅触发"点击"或"输入"等特​​定事件.

所以这里的解决方案是手动触发这些事件.这可以通过以下方式完成:

// the selector used is based on your example.
var elementTOUpdate = $('.textbox');
input.val('new-value');
input.trigger('input');

最后一个语句将触发元素上"input"事件的所有处理程序(将触发角度观察者)并更新范围.有关触发功能的更多信息:http: //api.jquery.com/trigger/