2016-12-07 98 views
1

我正在使用goldenualout與angualrJS。我現在面臨的異常以下:黃金佈局|錯誤:ng:btstrpd應用程序已使用此元素引導

Error: ng:btstrpd App Already Bootstrapped with this Element 
這一行代碼的執行

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

的原因是在我的HTML,我已經NG-應用程序,所以我怎麼能註冊金佈局時,我已經有ng-app?

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

+0

你是否設法解決這個問題?我有同樣的難度 –

+0

@JoãoPereira是的,我用不同的方式解決了這個問題。在'registerComponent'中,我用$ scope編譯了html。 ($ scope); $(「

」))($ scope); container.getElement()。html(html);' –

+0

https://jsfiddle.net/shafaq_kazmi/9buwcoek/1/ –

回答

1

好了,official Golden Layout docs建議使用手動引導,但如果你想使用ng-app保持,那麼你必須確保你的組件(模板)是由角(通過$compile)編制。下面是如何做到這一點的例子:

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

基本上,從您提供的信息庫示例中的主要區別是,而不是隻追加原始的HTML,我們用角$compile它,所以現在它知道設置up綁定並保持html更新。

這應該允許您繼續使用ng-app而不是手動引導程序。

+0

感謝@nikaspran的詳細回覆。這是否意味着我必須在應用程序運行中註冊所有組件。我們假設,我處於單頁應用程序(SPA)中,而且我只能在儀表板屏幕中使用金色佈局。我不想在應用程序運行中註冊所有組件。它會在這種情況下工作嗎? –

+0

@ShafaqKazmi我的理解是'registerComponent'基本上告訴了GoldenLayout如何渲染你初始化的組件。你可以在任何可以注入'$ compile'和某種範圍的地方執行它,所以應該可以在狀態轉換或控制器中使用它。具體情況取決於您整個應用程序的外觀,因此最好進行實驗。 – nikaspran