0

I am knew to AngularJS and trying to figure out a way to access controllers from other view pages.

For example, I have a _layout.cshtml page that contains global np-app and np-controller and in that global layout page there is a div that loads from different view that has anothernp-app & np-controller.

Please see below HTML and JS file:

Global layout html page:

<body ng-app="globalApp" ng-controller="globalCtrl">
  <div ng-show="loader" class="progress-loader">
    <h3>Processing...</h3>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        <span class="sr-only">45% Complete</span>
      </div>
    </div>
    <span class="text-danger">Please wait for the process to complete and do not refresh or close the browser.</span>
  </div>
  <div class="navbar navbar-inverse navbar-fixed-top" ng-app="navApp" ng-controller="navSearchCtrl">
    <!-- NAV BAR code goes here -->
  </div>
  <div class="container body-content">
    <!-- Other view gets loaded here -->
    @RenderBody()
  </div>
</body>

Search View HTML Page that gets loaded in @RenderBody in layout page

<div class="container" ng-app="searchApp" ng-controller="searchAppsCtrl">
  <div id="search-form">
    <form role="form" method="post" ng-submit="searchSubmit()">
        <!-- Code goes here -->
    </form>
  </div>
</div>

AngularJS file:

angular.module('globalApp', ['searchApp', 'navApp'])
  .controller("globalCtrl", function($scope, $rootScope) {
    $rootScope.loader = false;
  })
  // Code goes here
  });

var searchApp = angular.module("searchApp", []);
searchApp.controller('searchAppsCtrl', function($scope, $rootScope, request, $interval, $log) {
  // Code goes here
});

var navApp = angular.module("navApp", []);
navApp.controller('navSearchCtrl', function($scope, $rootScope, request, $interval, $log) {
    // Code goes here
});

My problem is that I cannot access angular bootstrap when it gets loaded in global layout page. I used angular inspector in chrome to see if I can see all the controllers. But I can only see two controllers, but not the third one that gets loaded from another view.

Please see below screenshot of Angular inspector in chrome.

enter image description here

Ray
  • 1,095
  • 3
  • 18
  • 43
  • I was following this [article](http://www.codeproject.com/Articles/862602/Define-multiple-Angular-apps-in-one-page) and found out that I can use multiple apps to load on a page. Basically, I want to use multiple controllers for different features for each page. I guess I just have to use controllers instead apps. – Ray Nov 02 '16 at 23:06
  • That's an interesting article. But they are creating multiple modules from the looks of it, not really different apps. I might be wrong. Remove the multiple ng-apps except the globalApp, where you injected the 'searchApp', 'navApp' modules. That should work. If you really want to use multiple ng-apps this might help http://stackoverflow.com/a/18571455/1339516 – Searching Nov 02 '16 at 23:20
  • Thank you. On the side note, is there a way to load controller from another view that gets loaded in global layout? For example, Layout page loads view from `search/index` page to `@RenderBody` – Ray Nov 02 '16 at 23:49

0 Answers0