在Chrome扩展程序中使用页面的有角JS

Question

我有一个HTML页面，其中有一些用Angular配置的DOM。现在，我正在构建一个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

嗯。实际上，您应该只可以使用原始Javascript或JQuery更改值，并且不需要更新范围，因为它是双向绑定，即。更新视图会更新模型，反之亦然。

模型不更新的唯一原因是观察者仅在诸如“单击”或“输入”之类的特定事件时才更新模型。

因此，此处的解决方案是手动触发这些事件。这可以通过以下方式完成：

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

最后一条语句将为“输入”事件触发元素上的所有处理程序（这将触发角度观察器）并更新范围。有关触发功能的更多信息： http

//api.jquery.com/trigger/