黄金布局|错误：ng：btstrpd应用程序已使用此元素引导

我正在使用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

来源

2016-12-07 Shafaq Kazmi

你是否设法解决这个问题？我有同样的难度 –

@JoãoPereira是的，我用不同的方式解决了这个问题。在'registerComponent'中，我用$ scope编译了html。（$ scope）; $（“

”））（$ scope）; container.getElement（）。html（html）;' –

https://jsfiddle.net/shafaq_kazmi/9buwcoek/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而不是手动引导程序。

来源

2016-12-09 18:10:57 nikaspran

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

@ShafaqKazmi我的理解是'registerComponent'基本上告诉了GoldenLayout如何渲染你初始化的组件。你可以在任何可以注入'$ compile'和某种范围的地方执行它，所以应该可以在状态转换或控制器中使用它。具体情况取决于您整个应用程序的外观，因此最好进行实验。 – nikaspran

黄金布局|错误：ng：btstrpd应用程序已使用此元素引导

回答

相关问题