angularjsng-viewng-controllerng-app

The controller with the name 'viewctrl' is not registered


Error Image

<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.


Solution

  • you need to bootstrap them using angular.bootstrap()

    first give id to the child div lets say App2

    <div class="ibox float-e-margins" ng-app="childview" id="App2">
    </div>
     angular.bootstrap(document.getElementById("App2"), ['childview']);
    

    this will allow Angular to run subsequent views to run on the dom