Angular js not working on chrome extension

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

Please show us some code. There is no reason it should not other than incorrect usage. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Mar 31, 2015 at 8:09

Sergiu Paraschiv · Accepted Answer · 2015-03-31 11:00:32Z

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 $scopes, ng-click and possible some custom directive to achieve this.

answered Mar 31, 2015 at 11:00

Sergiu Paraschiv

10.2k5 gold badges42 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular js not working on chrome extension

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related