Question

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

我已经通过背景页面注入了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>)

这不会评估表达式。我对Ajs做错了什么

Answer 1

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

Angular js不支持chrome扩展

1 个答案: