使用页面的角度JS在Chrome扩展 [英] Using page's angular JS in chrome extension

问题描述

我已经有一些与DOM的角度配置的HTML页面。现在，我建立一个Chrome扩展到文本框中修改值。为文本框被设计角 element.value =为newValue 将不起作用。阅读一些资源后，我才知道，我需要做的改变元素的范围。我试着在扩展这样做。

I've a HTML page which has some DOM configured with Angular. Now I'm building a chrome extension to modifying value in a text box. element.value= newValue will not work as the text box is designed with Angular. After reading some resources, I came to know that I need to do the changes to the scope of the element. I tried doing this in the extension.

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

这似乎并不如预期的工作。当我挖成问题越深，我才知道，在窗口的范围的角度没有得到合适的范围。

This doesn't seem to work as intended. When I dug into the problem more deeply, I came to know that the angular in the scope of window was not getting the right scope.

我也试图从我的推广和使用注入angular.js angular.element 直接也似乎并没有解决问题。

I also tried to inject angular.js from my extension and using angular.element directly which also doesn't seem to solve the problem.

我缺少的东西。鸭preciate您的答复。

Am I missing something. Appreciate your replies.

推荐答案

嗯..其实你应该只能够使用香草JavaScript或jQuery来改变数值，不应该需要更新的范围，因为它是双向绑定IE浏览器。更新视图更新模型，反之亦然。

Hmm.. Actually you should be just able to change the value using vanilla Javascript or JQuery and should not need to update the scope as it is two-way binding ie. Updating the view updates the model and vice-versa.

的唯一原因模式不更新是因为观察者只在特定的事件，如点击或输入。

The only reason why the model does not update is because the watchers to update the model trigger only on particular events like "click" or "input".

因此​​，这里的解决方案是手动触发这些事件。
这可以通过做：

So the solution here would be to manually trigger these events. This can be do by:

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

最后一条语句将触发元素上的所有的处理程序输入事件（这将触发角观察家）和更新的范围。
在触发功能更多信息：
http://api.jquery.com/trigger/

这篇关于使用页面的角度JS在Chrome扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！