angular.bootstrap 错误：错误：[ng:btstrpd] 应用程序已使用此元素引导

我正在构建一个依赖于 Angular 的小部件以及小部件构建器工具。构建者使用 Angular 与ngApp附于html文档的标签。

当我在小部件生成器中加载小部件时，出现以下错误：

Error: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="company-widget" id="widget-app" data-company="demoCorp">'

这是引导函数：

angular.bootstrap('#widget-app', ["myWidget"]);

出于所有意图和目的，其余的myWidgetapp 是控制器和服务的相当标准的组合。

我跟着这篇博文 http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/关于如何允许多个ngApp指令在一个页面中，但是直到我设置了这个东西之后我才意识到它在博客文章的末尾说你不能嵌套应用程序，这就是这里发生的情况，以及可能发生的情况使用此小部件的网站数量很少。

我无法重新设计小部件构建器，并且我可以合理地假设对于嵌入小部件的任何 Angular 站点，主机站点将附加ngApp to the html tag.

我的问题是，有没有办法绕过这个限制，即使它是一个 hacky 解决方案？是否可以检查页面是否已经有应用程序并注入myWidget应用程序作为依赖项进入主机应用程序？

你可以尝试这样的事情：

https://jsfiddle.net/pavy/vnnuxgwo/ https://jsfiddle.net/pavy/vnnuxgwo/

// Parent/host application
var myApp = angular.module('myApp', []);

myApp.controller('AppCtrl',
    function($scope) {
        $scope.name = 'YourName';
    }
);

// Third party module
// This needs to happen after myApp is defined
var myWidget = angular.module('myApp');
myWidget.controller('MyWidgetCtrl',
    function($scope) {
        $scope.widgetName = 'This is my widget.';
    }
);

第三方模块代码（您的小部件）需要位于主机应用程序（在您的情况下，这将是小部件生成器）代码之后。

您还依赖于主机应用程序的模块名称，因此如果它发生更改，您的代码将会中断。有可能以编程方式获取加载的 Angular 应用程序名称的方法，这在这方面会有所帮助。