Angular JS不适用于Chrome扩展

Question

我需要Angular Js框架进行chrome扩展。

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

但是，当我在内容脚本中使用角度指令时，它就无法正常工作。

我也尝试使用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>)

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

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

我不会用Ajs做任何错误

Answer 1

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