AngularJSのネストされたモジュール

私は2つの異なるAngularJsモジュールを持っています：widgetContainerとウィジェット。AngularJSのネストされたモジュール

ウィジェットは、独立したアプリケーションとして表示することも、ウィジェットコンテナに含めることもできます。 widgetContainerには0-Nウィジェットが含まれています。

私はwidgetContainerにウィジェットモジュールをブートストラップを試みる場合、角度スロー次のエラー：

：

Error: [ng:btstrpd] App already bootstrapped with this element '<div id="childApp">' http://errors.angularjs.org/1.5.8/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22childApp%22%26gt%3B

私はthis plunk

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

EDITでこのエラーを再現しています

依存性注入を使用してprを解決する効率的に取り組む。

これで、ディレクティブからウィジェットをロードする必要があります。

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モジュールが内部にロードされていません。私が期待される結果を達成するために、私のplunker

出典

2016-08-19 oOnez

はそう同じ要素。リファレンス：https://docs.angularjs.org/error/ng/btstrpd –

を更新した、手動ブートストラップ用の構文

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

});

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

の下に使用することは要素

angular.bootstrap(element, [modules]);

出典

2016-08-19 16:58:39

にかかわらず、コントローラの使用以下の通りです両方のモジュールをブートストラップしないでください。代わりに、依存性注入を使用します。 htmlで1つのモジュールのみを宣言し、そのモジュールを角度コードを使って他のモジュールに依存させるようにします。ここを参照してください：https://docs.angularjs.org/guide/concepts#module

ここにあなたの更新plunkrだ：http://plnkr.co/edit/DJvzpCoxLRhyBl77S27k?p=preview

HTML：

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

AngularJS：あなたとJavaScriptから二回同じ角モジュールをブートストラップしようとしているよう

var parentApp = angular.module('parentApp', []) 
    .controller('MainParentCtrl', function($scope) { 
    $scope.name = 'universe'; 
    }); 



var childApp = angular.module('childApp', ['parentApp']) 
    .controller('MainChildCtrl', function($scope) { 
    $scope.childName = 'world'; 
    }); 


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

出典

2016-08-19 16:59:35 geoidesic

AngularJSのネストされたモジュール

答えて

関連する問題