javascript - 在 Chrome 扩展中使用页面的 Angular JS

标签 javascript angularjs google-chrome-extension

我有一个 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;
});

这似乎没有按预期工作。当我更深入地研究这个问题时,我发现 window 范围内的 Angular 没有得到正确的范围。

我还尝试从我的扩展中注入(inject) angular.js 并直接使用 angular.element 这似乎也无法解决问题。

我是不是错过了什么?感谢您的回复。

最佳答案

嗯..实际上,您应该能够使用普通 Javascript 或 JQuery 更改值,并且不需要更新范围,因为它是双向绑定(bind),即。更新 View 会更新模型,反之亦然。

模型不更新的唯一原因是观察者更新模型仅在“点击”或“输入”等特​​定事件上触发。

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

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

最后一条语句将触发元素上“输入”事件的所有处理程序(这将触发 Angular 观察程序)并更新范围。 有关触发功能的更多信息: http://api.jquery.com/trigger/

关于javascript - 在 Chrome 扩展中使用页面的 Angular JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40100223/

相关文章:

javascript - 以 Angular 获取数据属性

javascript - 使用javascript转义字符

javascript - Bootstrap 崩溃最初显示/隐藏

来自带有对象的对象的 AngularJS ng-options

angularjs - 在这个测试用例中,当增加一个简单的计数器时,是什么导致 react 比 Angular 慢得多?

google-chrome - 如何在扩展页面操作上添加更多链接

javascript - 使用沙箱从 Chrome 应用程序发出 ajax 请求

javascript - React 受控组件与不受控组件的总体定义

javascript - 如何从工厂函数返回 React 内存回调

javascript - Chrome 扩展 : Run Content Script before any Embedded Scripts run on Page