same ng-app and ng-controller multiple times in the same page mvc view

Question

I need to use same ng-app and same ng-controller multiple times in the same mvc view page.

<div ng-app="rootapp" ng-controller="rootcontroller">
<div id="div1">
---first content--------
    <div ng-app="editorApp" ng-controller="editorController" ng-init="getInformation('SettingsDuplicates')">

                    <div class="col-sm-2 validation-right" style="width:12.666667%">
                        <div class="greySlideB">
                            @Html.Partial("~/Views/Shared/Information/_InformationPartial.cshtml")

                            @Html.Partial("~/Views/Shared/RecentNotes/_RecentNotesPartial.cshtml")
                        </div>
                    </div>
                </div>
</div>

<div id="div2">
.......second content-------
    <div ng-app="editorApp" ng-controller="editorController" ng-init="getInformation('SettingsDuplicates')">

                    <div class="col-sm-2 validation-right" style="width:12.666667%">
                        <div class="greySlideB">
                            @Html.Partial("~/Views/Shared/Information/_InformationPartial.cshtml")

                            @Html.Partial("~/Views/Shared/RecentNotes/_RecentNotesPartial.cshtml")
                        </div>
                    </div>
                </div>
</div>


</div>

because ng-init function call parameter is different for each div. what is the best way to use same ng-app and ng-controller multiple times in another ng-app.

As I far I know you can't have nested ng-app. Take a look: http://stackoverflow.com/questions/22548610/can-i-use-one-ng-app-inside-another-one-in-angularjs#22548754 — developer033, Jul 05 '16 at 13:14
you should bootstrap apps manually if have more than one on page — Grundy, Jul 05 '16 at 13:48

jbrown · Answer 1 · 2016-07-05T13:47:55.393

You can't have nested ng-app directives. To get around this you can create a "parent" app that incorporates the others, like this:

var rootApp = angular.module('rootApp', []);
var editorApp = angular.module('editorApp', []);
var mainApp = angular.module('mainApp', ['rootApp', 'editorApp']);

rootApp.controller('rootController', function($scope) {
  $scope.name = 'root app';
});

editorApp.controller('editorController', function($scope) {
  $scope.name = 'editor app';
});

<!DOCTYPE html>
<html ng-app="mainApp">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
  </head>

<body>
  <div ng-controller="rootController">
    <p>Hello {{name}}!</p>
  </div>
  <div ng-controller="editorController">
    <p>Hello {{name}}!</p>
  </div>
</body>

</html>

same ng-app and ng-controller multiple times in the same page mvc view

1 Answers1