3

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

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

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是控制器和服务的标准组合。

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

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

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

4

1 回答 1

0

你可以尝试这样的事情：

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 应用程序名称，这在这方面会有所帮助。

于 2016-01-11T22:25:29.130 回答