1

I have a Google Chrome extension that injects a content script on given page of a site. This content script replaces the action bound to a button. When the button is clicked, some HTML elements are added (a foundation popup). I want to use Angular to manage the popup I add to the page. Can I do this ?

Here is sample HTML code that could be added when the button is clicked.

<div ng-app="MyApp">
    <div ng-controller="MyCtrl as ctrl">
        <p> {{ctrl.sayHello()}} </p>
    </div>
</div>

Will this work? (I haven't gotten it to work yet, but I'm still trying) If it works, what if the page already contains another Angular app?

After my HTML insertion, the HTML might look something like:

<html ng-app="PageApp">
    <body ng-controller="PageCtrl">
        ...
        ...
        <div ng-app="MyApp">
            <div ng-controller="MyCtrl">
                ...
            </div>
        </div>
    </body>
</html>

Edit: I have found angular.bootstrap(). So I can launch an Angular module on a given DOM element (my div). I think it could be a good solution. Can I still use it if Angular has already tried to load an ng-app directive and failed? Because it will certainly happen when injecting Angular code, and trying to load a PageApp that is not defined for me.

andrewgu
  • 1,562
  • 14
  • 23
Emrys Myrooin
  • 2,179
  • 14
  • 39
  • 1
    You can't have nested Angular apps. You may reformulate the question in favour of lazy loading module parts if that's what you're looking for. – Estus Flask Aug 07 '15 at 15:33
  • @estus It's not what I'm looking for. I have no access to the source of the page where I want to inject my angular application – Emrys Myrooin Aug 07 '15 at 15:35
  • You can remove ng-app attribute and hijack bootstrap process if it is possible. If ng-app boostrapping was failed by any means, then it is ok. Otherwise stick to hacking into bootstrapped module or jQuery. – Estus Flask Aug 07 '15 at 16:10
  • Yes it's what i want. When anugular will handle ng-app it will not find tha module, so it will crash. And then i want to botstrap m'y modul to the injected div when the button is clicked – Emrys Myrooin Aug 07 '15 at 16:12
  • @EmrysMyrooin , If you found my answer helpful, please upvote and mark as accepted so that this question may be closed. – andrewgu Aug 07 '15 at 16:31

1 Answers1

2

What @estus is saying is correct, and answered your question. Your code will not work, since "[you] can't have nested Angular apps", in other words an Angular app cannot have another Angular app inside of it, regardless of whether you have access to the source (which you probably do, since you're injecting code).

Suggestions

  • More radical, but note that most, if not all of AngularJS's functionality can be ported to vanilla JavaScript quite easily, if you ignore the attribute binding. You might have to write more specific and manual code, but this would cut any Angular-related problems out of the picture.
  • There is a hackish workaround that may allow you to nest some Angular apps, but this also requires access to the source of the page in which you're injecting the code, and some crazy DOM searching and manipulation, which may not be too efficient.
Community
  • 1
  • 1
andrewgu
  • 1,562
  • 14
  • 23