Angularjs Golden Layout |错误：ng:btstrpd应用程序已使用此元素引导

我在用黄金画和angualrJS。我面临以下例外：

Error: ng:btstrpd App Already Bootstrapped with this Element

在执行这行代码时

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

原因是，我的HTML中已经有了ng应用程序，那么当我已经有了ng应用程序时，如何注册golden layout

好吧，建议使用手动引导，但是如果您想继续使用

ng app

，那么您必须确保您的组件（模板）是通过Angular编译的（通过

$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，而是使用Angular来

$compile

它，因此现在它知道如何设置绑定并保持HTML的更新

---

这将允许您继续使用

ng应用程序

，而不是手动引导。

感谢@nikaspran的详细回复。这是否意味着我必须在应用程序运行时注册所有组件。让我们假设，我在单页应用程序（SPA）中，我只能在仪表板屏幕中使用黄金布局。我不想在应用程序运行时注册所有组件。在这种情况下它会工作吗？@ShafaqKazmi我的理解是，

registerComponent

基本上告诉GoldenLayout如何呈现初始化它的组件。您可以在任何可以注入

$compile

和某种范围的地方执行此操作，因此应该可以在状态转换甚至控制器中使用它。具体细节将取决于你整个应用程序的外观，因此最好尝试一下。你解决了这个问题吗？我也一样difficulty@Jo是的，我用不同的方式解决了这个问题。在

registerComponent

中，我用$scope编译了html<代码>变量html=$compile（$（“”））（$scope）；container.getElement（）.html（html）