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: stackoverflow.com/questions/22548610/… — developer033
– developer033, Commented Jul 5, 2016 at 13:14
you should bootstrap apps manually if have more than one on page — Grundy
– Grundy, Commented Jul 5, 2016 at 13:48

jbrown · Accepted Answer · 2016-07-05 13:47:55Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related