1

I am using goldenlayout with angualrJS. I am facing below exception:

Error: ng:btstrpd App Already Bootstrapped with this Element

on execution of this line of code

myGoldenLayout.on('initialised', function () {
 angular.bootstrap(angular.element('#layoutContainer')[0], ['app']);
});

The reason is, I have already ng-app in my HTML so how can I register golden layout when I already have ng-app?

https://github.com/codecapers/golden-layout-simple-angular-example/issues/1

B--rian
  • 5,578
  • 10
  • 38
  • 89
Shafaq Kazmi
  • 215
  • 1
  • 3
  • 12

1 Answers1

1

Well, the official Golden Layout docs recommend using manual bootstrap, but if you want to keep using ng-app, then you have to make sure that your components (templates) are compiled by Angular (via $compile). Here's an example of how to do that:

angular.module('someApp') // your main module name here
  .run(function ($compile, $rootScope) {
    myLayout.registerComponent('template', function( container, state ){
        var templateHtml = $('#' + state.templateId).html();
        var compiledHtml = $compile(templateHtml)($rootScope);
        container.getElement().html(compiledHtml);
    });


    myLayout.on( 'initialised', function() {
        $rootScope.$digest(); // Golden Layout is done, let Angular know about it
    });
  });

// somewhere...
myLayout.init();

Basically, the main difference from the example in the repository you provided is that instead of just appending raw HTML, we $compile it with Angular, so now it knows to set up bindings and keep the html updated.

This should allow you to keep using ng-app instead of manual bootstrap.

nikaspran
  • 312
  • 1
  • 3
  • 10
  • Thanks @nikaspran for the detailed reply. Does this means that I have to register all components on app run. Let's assume, I am in single page application (SPA) and I have to use golden layout in dashboard screen only. I do not want to register all components on app run. Will it work in that case? – Shafaq Kazmi Dec 11 '16 at 20:33
  • @ShafaqKazmi my understanding is that `registerComponent` basically tells GoldenLayout how to render the components you initialise it with. You can do it anywhere you can inject `$compile` and some sort of scope into, so it should be possible to use it in a state transition or even a controller. The specifics will depend on how your entire app looks like though, so it's best to experiment with it. – nikaspran Dec 13 '16 at 11:19