Angular JS不适用于Chrome扩展

Question

I need Angular Js framework for a chrome extension.

what i already done its injected AJS script via background page.

But when i use angular directives in content script it just not working.

I also tried initializing Angular js Manually using Bootstrap command but that also didn't work.

any help would be appreciated.

Actually i am trying to convert an existing extension developed in pure JS into Ajs framework. I injected AJs script in chrome tab from background page as below.

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);
            });
    }

In content script i created a sidebar div which have a top root div with properties

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

i created two controllers Ctrl1 and Ctrl2 for TApp.
And i added a Div as below in #SidePan

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

This works as expected, But when i changed the #SidePan html on a buttonclick as below

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

this wont evaluates the expression.Am i doing anything wrong with Ajs

Answer 1

$("#SidePan").html('<div ng-controller="Ctrl2">{{4+5}}</div>) won't work. AngularJS does not monitor the DOM so that it would know you manipulated it from outside . Stop mixing up jQuery and AngularJS. You need to use $scope s, ng-click and possible some custom directive to achieve this.