Javascript 通过Google Chrome扩展从注入的html调用带有ng指令的函数

我正在尝试使用Chrome扩展作为我正在开发的web应用程序的免费工具

我使用

chrome.tab.executeScript

操作web应用程序的DOM，并在

DIV

中添加一个按钮

chrome.tabs.executeScript({

    code: 'var e =  document.createElement("div");' +
              'e.innerHTML = "' + 
              '<button ng-click="myfnc()"></button>' +
              '";' +    
              'document.getElementsByTagName("body").appendChild(e);'

});

---

但是，当我点击按钮时，什么也没有发生。你知道为什么吗？来自Google Chrome扩展的注入html是否可以直接与网页代码交互

创建属性为

ng click

的元素不会通知Angular页面中存在该元素，因为在引导过程中会对文档进行一次解析。因此，有一个元素存在于任何角度范围的“外部”，这意味着属性

ng click

只是存在，并没有导致调用相应的指令（

ngClick

）

当然，如果页面具有角度，那么在将元素插入页面后，您将希望使用与所需的

$scope

一起编译元素

全面的解决方案超出了您的问题范围。（为什么单击按钮时什么都没有发生？）如果您想了解更多有关使用带Angular的注入代码的信息，请阅读：

• 用于拾取元素的

  $scope

  对象
• 使用angular elements上可用的
• 在中使用派生的

  $scope

  对象，以便Angular知道它

你想采取的步骤有点像

获取要在其中插入元素的

$scope

：

var angular = document.querySelector('body');
var scope = angular.element(angular).scope();

将新元素插入页面：

var newElem = angular.element('div');
angular.append(newElem);

$compile

具有此

$scope

的元素：

$compile(newElem)(scope);

---

有关动态创建角度元素的更多信息，请参见的答案。

非常感谢您为我指明了正确的方向。我将尝试了解更多有关这方面的信息。在第2项中是

angular.append（ngElem）或
角度追加（newElem）？所以我要做的就是把
$scope
放在我想放按钮的地方；附加元素并使用
$compile
在页面上呈现它。这真的很有道理。唯一的问题是
chrome.tabs.executeScript
无法访问
angularjs
文件和网页上的其他Java脚本。它在一个孤立的世界上运行，因此您的建议将有以下错误
uncaughtreferenceerror:angular未定义
@sdgluck@jimx将
插入执行这些操作的页面，而不是尝试在后台脚本中执行这些操作。：-）我想到了D是的，那可能真的有用。我将使用
chrome.tabs.executeScript
在页面上插入
。注入的脚本将包含一个带有枚举步骤的函数；调用函数并希望它能工作。
var newElem = angular.element('div');
angular.append(newElem);

$compile(newElem)(scope);