Angular js 无法处理 chrome 扩展

Question

我需要 Angular 用于 chrome 扩展的 Js 框架。

我已经通过后台页面注入了 AJS script。

但是当我在内容脚本中使用 angular 指令时，它就不起作用了。

我也尝试使用 Bootstrap 命令手动初始化 Angular js，但这也没有用。

如有任何帮助，我们将不胜感激。

实际上我正在尝试将现有的纯 JS 开发的扩展转换为 Ajs 框架。我在后台页面的 chrome 选项卡中注入了 AJs 脚本，如下所示。

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {    
    if (request.Arg == 'INIT') {
        $.when(
        $.ajax({
        url: server + '/Cscript.js',// Content Script
                dataType: 'text'
        }),         
        $.ajax({
            url: server +'/util.js',// Jquery and other 3drparty
            dataType: 'text'
        }),
        $.ajax({
            url: server +'/angular.js',
            dataType: 'text'
        })
).then(function(Cscript,Ujs,ang) {
                chrome.tabs.executeScript(sender.tab.id, {code: Ujs[0]+ang[0]+Cscript[0], allFrames:true});
                sendResponse(config);
            });
    }

在内容脚本中，我创建了一个侧边栏 div，它有一个顶根 div 和属性

$("#SidePan").attr('ng-app','TApp');
$("#SidePan").attr("ng-csp", "true");

我为 TApp 创建了两个控制器 Ctrl1 和 Ctrl2。
我在#SidePan

中添加了如下所示的 Div

$("#SidePan").html('<div ng-controller="Ctrl1">{{2+3}}</div>)

这按预期工作，但是当我按如下所示更改#SidePan html 按钮时

$("#SidePan").html('<div ng-controller="Ctrl2">{{4+5}}</div>)

这不会评估 expression.Am 我对 Ajs 做错了什么

Answer 1

$("#SidePan").html('<div ng-controller="Ctrl2">{{4+5}}</div>) 将不起作用。 AngularJS 不会监视 DOM，因此它会知道您从外部操纵了它。不要混淆 jQuery 和 AngularJS。您需要使用 $scopes、ng-click 和可能的一些自定义指令来实现此目的。

Angular js 无法处理 chrome 扩展

Angular js not working on chrome extension

google-chrome-extension

angularjs