Angular js不适用于chrome扩展答案

【问题标题】：Angular js not working on chrome extensionAngular js不适用于chrome扩展
【发布时间】：2015-03-31 19:02:04
【问题描述】：

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

我已经通过后台页面注入了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 做错了吗

【问题讨论】：

请给我们看一些代码。除了使用不正确之外，没有其他理由不应该这样做。

标签： angularjs google-chrome-extension

【解决方案1】：

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

【讨论】：