How to manage multiple controllers for the same template in AngularJS?

Question

How to manage multiple controllers for the same template in AngularJS?

I am facing a requirement where a single page needs to display a lot of different data, all within one vertical-scrolling page.

To manage this, I have implemented collapsible divs on the page controlled by ng-if to efficiently handle the DOM elements.

In the initial prototype, I had all the logic for these divs in one controller. However, I have now decided to take a different approach. I want to have one main controller for the entire page and separate child controllers for each collapsible div.

I have created an object for each div in the page controller and added multiple child controllers in my main module (app.js). I expected each of them to be children of the pageCtrl so that I can access the data for each div from there.

Unfortunately, this setup is not working as expected. There are no errors in the console, but none of the divs are visible.

The structure of my code is as follows:

<body ng-app ="mainModule">
 <div ng-controller ="pageCtrl">
    <div ng-controller = "collapse1Ctrl" ng-include="collapse1.tpl" ng-if="collapse1reqd">
<div ng-controller = "collapse2Ctrl" ng-include="collapse2.tpl" ng-if="collapse2reqd">
<div ng-controller = "collapse3Ctrl" ng-include="collapse3.tpl" ng-if="collapse3reqd">
<div ng-controller = "collapse4Ctrl" ng-include="collapse4.tpl" ng-if="collapse4reqd">
<div ng-controller = "collapse5Ctrl" ng-include="collapse5.tpl" ng-if="collapse5reqd">

</div>

My JavaScript code looks like this:

angular.module("mainModule", []);
angular.module("mainModule").controller("pageCtrl", pageCtrlFn);
angular.module("mainModule").controller("collaspse1Ctrl", collaspse1CtrlFn);
angular.module("mainModule").controller("collaspse2Ctrl", collaspse2CtrlFn);
angular.module("mainModule").controller("collaspse3Ctrl", collaspse3CtrlFn);
angular.module("mainModule").controller("collaspse4Ctrl", collaspse4CtrlFn);
angular.module("mainModule").controller("collaspse5Ctrl", collaspse5CtrlFn);

I have checked that all templates and conditions are correctly placed.

Due to the length of my code, I am refraining from posting it at the moment. I may create a similar fiddle to share soon.

At this point, I am questioning if there might be an issue with the overall structure of my implementation. Any insights would be greatly appreciated!

javascript angularjs structure

Answer 1

Answer №1

After carefully analyzing the original poster's question and the challenges faced, here is a demo showcasing how nested controllers function and how the scope behaves. You can view the example here.

Here is how the HTML structure looks:

<body ng-app="scopeInheritance">
<div class="spicy">
    <div ng-controller="MainController">
        <p>Good {{timeOfDay}}, {{name}}!</p>
        <p>{{display.showName}} - {{age}} --> New Age - {{display.age}}</p>
        <input type="text" ng-model="name">

        <button ng-click="resetTime()">CHANGE</button>
        <div ng-controller="ChildController">
            <p>Good {{timeOfDay}}, {{name}}!</p>
            <button ng-click="setTime()">SET</button>
            <input type="text" ng-model="display.showName"> Age - {{age}}
            <input type="text" ng-model="age">
            <button ng-click="setAge()">Change Age</button>
            <div ng-controller="GrandChildController">
                <p>Good {{timeOfDay}}, {{name}}!</p>
            </div>
        </div>
    </div>
</div>

The JavaScript implementation is as follows:

(function(angular) {
  'use strict';
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.files ='';
  $scope.name = 'Nikki';
  $scope.display={};
  $scope.display.showName ='Vikram';
  $scope.age ='20';

  $scope.resetTime = function(){
     $scope.timeOfDay = 'chaged day';
   };

}]);

myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
   $scope.$parent.timeOfDay ='';
   $scope.setTime = function(){
     $scope.timeOfDay = 'new day';
   };
   $scope.setAge = function(){
     $scope.display.age ='25';
   };
}]);

myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);
})(window.angular);

This demonstration builds upon the example provided in AngularJS documentation on nested controllers.

Answer 2

After carefully analyzing the original poster's question and the challenges faced, here is a demo showcasing how nested controllers function and how the scope behaves. You can view the example here.

Here is how the HTML structure looks:

<body ng-app="scopeInheritance">
<div class="spicy">
    <div ng-controller="MainController">
        <p>Good {{timeOfDay}}, {{name}}!</p>
        <p>{{display.showName}} - {{age}} --> New Age - {{display.age}}</p>
        <input type="text" ng-model="name">

        <button ng-click="resetTime()">CHANGE</button>
        <div ng-controller="ChildController">
            <p>Good {{timeOfDay}}, {{name}}!</p>
            <button ng-click="setTime()">SET</button>
            <input type="text" ng-model="display.showName"> Age - {{age}}
            <input type="text" ng-model="age">
            <button ng-click="setAge()">Change Age</button>
            <div ng-controller="GrandChildController">
                <p>Good {{timeOfDay}}, {{name}}!</p>
            </div>
        </div>
    </div>
</div>

The JavaScript implementation is as follows:

(function(angular) {
  'use strict';
var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainController', ['$scope', function($scope) {
  $scope.timeOfDay = 'morning';
  $scope.files ='';
  $scope.name = 'Nikki';
  $scope.display={};
  $scope.display.showName ='Vikram';
  $scope.age ='20';

  $scope.resetTime = function(){
     $scope.timeOfDay = 'chaged day';
   };

}]);

myApp.controller('ChildController', ['$scope', function($scope) {
  $scope.name = 'Mattie';
   $scope.$parent.timeOfDay ='';
   $scope.setTime = function(){
     $scope.timeOfDay = 'new day';
   };
   $scope.setAge = function(){
     $scope.display.age ='25';
   };
}]);

myApp.controller('GrandChildController', ['$scope', function($scope) {
  $scope.timeOfDay = 'evening';
  $scope.name = 'Gingerbread Baby';
}]);
})(window.angular);

This demonstration builds upon the example provided in AngularJS documentation on nested controllers.

Answer 3

Answer №2

It is recommended to encapsulate all templates and controllers within components, keeping them hidden from external controllers

<component1 ng-if="req1"></component1>
<component2 ng-if="req2"></component2>
<component3 ng-if="req3"></component3>

Additionally, make sure to utilize ControllerAs for proper scope management.

Answer 4

It is recommended to encapsulate all templates and controllers within components, keeping them hidden from external controllers

<component1 ng-if="req1"></component1>
<component2 ng-if="req2"></component2>
<component3 ng-if="req3"></component3>

Additionally, make sure to utilize ControllerAs for proper scope management.

How to manage multiple controllers for the same template in AngularJS?

Answer №1

Answer №2

Similar questions

What are the best ways to prioritize custom events over ng-click events?

Obtain the response header variable within a Shiny application

What is the best way to connect a relative CSS stylesheet to a master page?

Obtaining the desired element from a function without relying on an event

unable to assign values to this.props (appears as undefined or an empty array)

Create a dropdown menu using a PDO query to populate the selectable options

Discover the potential of JavaScript's match object and unleash its power through

Navigating with React Router using server-side routing in the web browser

Asynchronous Middleware in ExpressJS Routing

Unable to open a modal in Angular UI after closing the initial modal

obtain the image number by extracting a portion of the text

I must adjust the size of images based on the size of the viewer's screen

What distinguishes defining a function through a prototype versus as a class property?

The never-ending cycle and memory overload that occur when using Angular's ngRoute

"Unexpected behavior: NextAuth is failing to return defined custom scopes

Guide on retrieving a nested JSON array to extract a comprehensive list of values from every parameter within every object

Struggling to display the array after adding a new item with the push method

Is there a way to programmatically close all ui-select drop down lists?

Sequelize makes it easy to input records into various tables simultaneously

Tips for resolving the UNABLE_TO_GET_ISSUER_CERT_LOCALLY issue while attempting to install Sentry using npm or curl