<div class="wrapper" id="body" ng-app="masterview" ng-controller="masterctrl" data-ng-init="getmenus()">
<header id="header">
<div class="header-width row">
<div class="col-xl-9">
<div class="logo float-xs-left">
<a href="#">
<img src="~/img/logo_accord.png" alt="Ace Report" />
</a>
</div>
</div>
<div class="col-xl-3 header-right">
<div class="header-inner-right">
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
<div class="float-default chat">
<div class="right-icon">
<a href="#">
<i class="fa fa-comments-o"></i>
</a>
</div>
</div>
<div class="user-dropdown">
<div class="btn-group">
<a href="index.html#" class="user-header dropdown-toggle" data-toggle="dropdown"
data-animation="slideOutUp" aria-haspopup="true"
aria-expanded="false">
<img src="~/assets/images/user.jpg" alt="Profile image" />
</a>
<div class="dropdown-menu user drop-profile dropdown-card dropdown-card-profile animated flipInY">
@*
<header class="card-header d-flex">
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-user"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-cog"></i>
</a>
<a href="javascript:void(0);" class="text-center">
<i class="fa fa-power-off"></i>
</a>
</header>*@
<ul class="list-unstyled card-body">
@*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Manage Accounts</span>
</span>
</a>
</li>*@
<li>
<a href="index.html#">
<span>
<span class="align-middle">Change Password</span>
</span>
</a>
</li>
@*
<li>
<a href="index.html#">
<span>
<span class="align-middle">Check Inbox</span>
</span>
</a>
</li>*@
<li>
<a href="@Url.Action("Logout", "Admin")">
<span>
<span class="align-middle">Sign Out</span>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--top menu bar-->
<div id="header-icon" class="" >
<div class="header-width">
<div class="col-xl-12">
<div class="menucontainer">
<div class="overlapblackbg"></div>
<a id="navtoggle" class="animated-arrow">
<span></span>
</a>
<nav id="nav" class="topmenu" role="navigation">
<div class="sidebar-search">
<div class="logo float-xs-left">
<a href="#"></a>
</div>
<a href="javascript:void(0)">
<i class="search-close icon_search"></i>
</a>
</div>
<!--left menu-->
<ul id="dvMenuInner" class="nav navbar-nav">
<li ng-repeat="parent in menu" class="dropdown">
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="!parent.children">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<a href="/{{parent.url}}/{{parent.actionname}}" ng-show="parent.children" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-tachometer header-icon" aria-hidden="true"></span>{{parent.menuname}}
</a>
<ul class="dropdown-menu" ng-show="parent.children">
<li ng-repeat="child in parent.children" ng-show="!child.childrencc">
<a href="/{{child.url}}/{{child.actionname}}">{{child.menuname}}</a>
</li>
<li class="dropdown-submenu" ng-repeat="child in parent.children" ng-show="child.childrencc">
<a href="/{{child.url}}/{{child.actionname}}" ng-if="child.url && child.actionname">{{child.menuname}}</a>
<a href="#" ng-if="!child.url || !child.actionname">{{child.menuname}}</a>
<ul class="dropdown-menu" ng-show="child.childrencc">
<li ng-repeat="children in child.childrencc">
<a href="/{{children.url}}/{{children.actionname}}">{{children.menuname}}</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- END HEADER -->
<!-- START CONTENT -->
<section id="main" class="container-fluid">
<!-- START RIGHT CONTENT -->
@*
<div class="row">
<!-- START RIGHT CONTENT -->
<section id="content-wrapper" class="form-elements">
<!-- START PAGE TITLE -->
<div class="site-content-title">
<h2 class="float-xs-left content-title-main">Client Dashboard</h2>
<!-- START BREADCRUMB -->
<ol class="breadcrumb float-xs-right">
<li class="breadcrumb-item">
<span class="fa fa-home" aria-hidden="true"></span>
<a href="index.html#">Home</a>
</li>
<li class="breadcrumb-item active">Dashboard</li>
</ol>
<!-- END BREADCRUMB -->
</div>
<!-- END PAGE TITLE -->
</section>
</div>*@
@*
<div class="contain-inner"></div>*@
<ng-view> @RenderBody()</ng-view>
</section>
@*
</div>
I want menus to be loaded at the start of the application and I have multiple pages in MVC, so the problem is getting the error stated that controller not registered. so can you tell me how can I handle ng-app and ng-controller in master page and pages?
I am loading menus as follows:
app.controller('masterctrl', function ($scope, $http, $window) {
$scope.getmenus = function () {
var holding_url = encodeURI(APIURL + "getmenus");
$http.get(holding_url)
.then(function (response) {
$scope.names = response.data.t1;
$scope.menu = [];
$scope.childrenmenu = [];
$scope.count = 0;
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid == 0) {
$scope.menu.push(value);
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.menu, function (value2, key2) {
if (value.parentid == value2.menuid) {
if (value2.children == undefined) {
value2.children = [];
value2.showChildren = false;
}
value2.children.push(value);
$scope.childrenmenu.push(value);
}
});
}
});
angular.forEach(response.data.t1, function (value, key) {
if (value.parentid != 0) {
angular.forEach($scope.childrenmenu, function (value3, key3) {
if (value.parentid == value3.menuid) {
if (value3.childrencc == undefined) {
value3.childrencc = [];
value3.showChildren = false;
}
value3.childrencc.push(value);
}
});
}
});
Please see image due to that error data in table is also not loading properly, because master page and pages controller can not work together.
you need to bootstrap them using angular.bootstrap()
first give id to the child div lets say App2
this will allow Angular to run subsequent views to run on the dom