0

I have a SPA in Extjs system. I have also included angular and the necessary modules which i want to use on a page (external html referred in a panel of extjs).

Angular is defined in and working everywhere except in newly loaded page.The problem is that i have to (re)load angular on each page-load in order to get my page recognized by angular. If i load it each time, everythink works.

How can i ensure that my dynamically page is recognized automatically by angular?

My html:

<div ng-controller="MainCtrl">
     {{3+3}} and {{n}} <br>
</div>
Asqan
  • 4,319
  • 11
  • 61
  • 100
  • This may sound silly (since I haven't used ExtJs myself), but how exactly those new pages are loaded? Can you use [$compile](https://docs.angularjs.org/api/ng/service/$compile) service to compile your html? – Ilya Luzyanin Jun 09 '15 at 09:33
  • Have you tried `angular.bootstrap()`? https://docs.angularjs.org/guide/bootstrap – CD.. Jun 09 '15 at 09:36
  • You choose "forms" in extjs to be loaded in a certain div. i have defined a panel in the form to be loaded and in that panel i can define inline html or refer to an external html file (using the functions respectively "html" and "loader") http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.panel.Panel . And also, i have tried bootstrap after my page is loaded. No any result. For $compile, i'am not sure how precisely i should use it in my situation. – Asqan Jun 09 '15 at 10:04
  • Is this something that might help you? http://stackoverflow.com/questions/15250644/loading-an-angularjs-controller-dynamically – Yellen Jun 09 '15 at 10:46
  • I'll take a look. Because i see now that also in my dynamically loaded page angular is defined. Thus, there should be a detection-problem with my controller – Asqan Jun 09 '15 at 10:52
  • Result of bootstrap: "[ng:btstrpd] App Already Bootstrapped with this Element" – Asqan Jun 09 '15 at 11:14

1 Answers1

0

angular.bootstrap() was the solution.

Things you have to care about are:

  • you should nowhere use ng-app
  • you should include jquery explicitly

  • you can put the bootstrap in a panel's afterrender like:

    listeners : { 'afterrender' : { fn : function (panel, par2, par3) { angular.bootstrap($('#idOfYourAngularCode'), ['A']); }, scope : this } }

  • If you want to use an external html, you can define your "bootstrap" also in your html file (by using a script tag). But if you use html inline in the panel (like me), this is the most appropriate way.
Asqan
  • 4,319
  • 11
  • 61
  • 100