AngularJS中的嵌套模块

问题描述

我有2个不同的AngularJs模块:一个widgetContainer和一个小部件.

I Have 2 differents AngularJs modules : a widgetContainer and a widget.

小部件可以显示为独立应用程序，也可以包含在widgetContainer中.一个widgetContainer包含0-N个小部件.

A widget can be displayed as an independant application or be included into a widgetContainer. A widgetContainer contains 0-N widgets.

如果我尝试将小部件模块提升到widgetContainer中，则角度抛出以下错误:

If i try to boostrap the widget module into the widgetContainer, angular throw the following error :

我在此问题

<div id="parentApp">
<div ng-controller="MainParentCtrl">
  Hello {{name}} !
  <div id="childApp">
    <div ng-controller="MainChildCtrl">
      Hello {{childName}} !
    </div>
  </div>
</div>

使用依赖注入有效地解决了这个问题.

Using Dependency injection solve the problem efficiently.

现在，我需要从指令加载小部件.

Now, I need to load the widget from a directive.

parentApp.directive('widget', [function() {
  return {
    restrict: 'E',
    link: function($scope, $element, $attr) {

      var div = document.createElement('div');
      div.setAttribute("ng-controller", "MainChildCtrl");
      div.innerHTML = 'Hello {{childName}} !';
      $element.append(angular.element(div));

    }
  };
}]);

已创建div，但未在其中加载childApp模块.我已经更新了朋克车

The div is created but the childApp module is not loaded inside.I have updated my plunker

推荐答案

要获得预期的结果，请在下面使用

To achieve expected result, use below

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById('parentApp'), ['parentApp','childApp']);

});

http://plnkr.co/edit/4oGw5ROo80OCtURYMVa3?p=preview

无论元素上使用控制器如何，手动引导的语法如下所示

Syntax for manual bootstrap is as below irrespective of usage of controllers on elements

angular.bootstrap(element, [modules]);

这篇关于AngularJS中的嵌套模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！