Question

我正在构建依赖于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"]);

对于所有意图和目的，myWidget应用程序的其余部分是非常标准的控制器和服务组合。

我跟着this blog post一起关于如何在一个页面中允许多个ngApp指令，但是直到我设置了这个东西之后我才意识到它在最后说博客文章说你无法嵌套应用程序，这就是这里发生的事情，以及在使用这个小部件的少数网站上可能发生的事情。

我无法重新设计小部件构建器，我可以合理地假设对于嵌入小部件的任何Angular站点，主机站点会将ngApp附加到html标记。

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

Answer 1

您可以尝试这样的事情：

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.';
    }
);

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

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

angular.bootstrap错误：错误：[ng：btstrpd] App已经使用此元素进行了自举

1 个答案: