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

Node.JS using Express: Issue : encountering EADDRINUSE error due to address being already in use

Retrieve JSON data from an object using the Amplify Storage feature

`Loading CSS and JS files in node.js: A step-by-step guide`

The value remains unchanged when using Renderer2.setProperty()

Customize Monaco Editor: Implementing Read-Only Sections

Adding a property conditionally in jsx: A guide

Enable Class exclusively on upward scrolling on the browser

Save the JWT token securely within a closure

How can I combine columns within a single header in ng-table?

What is the best way to use jQuery to filter data in a table by clicking on a specific table row?

Unable to locate the root element for mounting the component in Cypress with React

Tips for dynamically updating an input within a shadow DOM using code?

Retrieve and manipulate custom headers from a webview within an AngularJS app

Capybara testing integration for input fields using 'TextAngular' feature

What is the most effective way to transmit a conditional operator via a TypeScript boolean field?

Create a system where three arrays are interconnected, with the first array representing the name of the object

Run the command "node index.js" to simultaneously start and stop the server

JavaScript Promise Handling: using fetch method to retrieve and extract the PromiseValue

There was a parsing error due to an unexpected token, and we were expecting a comma instead

Submit a list of checkboxes selected to Google Sheets separated by commas