angular.bootstrap错误：错误：[NG：btstrpd]应用已与此元素自举 [英] angular.bootstrap error: Error: [ng:btstrpd] App Already Bootstrapped with this Element

问题描述

我要建，它取决于角与小部件构建工具沿着一个小部件。建设者用角与 ngApp 附加到文件的 HTML 标记。

I'm building a widget that depends on Angular along with a widget builder tool. The builder used Angular with ngApp attached to the html tag of the document.

在我小部件制造商中加载小部件，我得到以下错误：

When I load up the widget within the widget builder, I get the following error:

错误：[NG：btstrpd]应用已与此元素自举'＆LT; D​​IV CLASS =公司的小部件ID =小部件应用数据公司=demoCorp＆GT;'

下面是自举功能：

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

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

For all intents and purposes, the rest of the myWidget app is a pretty standard mix of controllers and services.

我是用<一个按照顺序href=\"http://www.simplygood$c$c.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/\"相对=nofollow>如何让多个 ngApp 指令在一个单一的页面，但我并没有意识到，直到后，我成立这个东西这个博客帖子了，它有权在博客文章，你不能嵌套的应用程序，这是这里发生了什么，以及对少数使用该控件的网站可能会出现什么样的结尾说。

I was following along with this blog post on how to allow multiple ngApp directives in a single page, however I didn't realize until after I set this thing up that it says right at the end of the blog post that you can't nest apps, which is what's happening here, and what may occur on a small number of sites that use this widget.

我不能重新设计部件建设者，我可以合理地假定为那里的小部件是嵌入式的，主持人现场将附加 ngApp 来任意角度网站 HTML 标记。

I can't redesign the widget-builder and I can reasonably assume that for any Angular sites where the widget is embedded, the host site will attach ngApp to the html tag.

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

My question is, is there a way to get around this limitation, even if it's a hacky solution? Is it possible to check if the page already has an app and inject the myWidget app into the host app as a dependency?

推荐答案

您可以尝试这样的事：

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

第三方模块code（小部件）需要拿出主机应用程序之后（在你的情况，这将是小工具生成器）code。

The third party module code (your widget) needs to come after the host app (in your case, this would be the Widget Builder) code.

您是还依赖于主机应用程序的模块名称，因此，如果它的变化，你的code将打破。有可能以编程方式获取所加载的应用角度名字，这将有助于在这方面。

You're also dependent on the module name of the host app, so if it changes, your code will break. There are likely ways to programmatically get the loaded Angular app name, which would help in this regard.

这篇关于angular.bootstrap错误：错误：[NG：btstrpd]应用已与此元素自举的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！