Is it possible to utilize a controller within a page by referencing its controller ID?

Question

Is it possible to utilize a controller within a page by referencing its controller ID?

In my project, I am facing an issue where multiple HTML pages are linking to each other and duplicating the same controller each time a new page is opened. This results in each page using its own controller, causing data saved in the previous controller to not apply on the next page with the new duplicated controller.

Upon realizing that each controller has its own ID ($scope.$id), I have a couple of questions:

Is there a way for me to specify which controller should be used on an HTML page based on its controller ID?
Alternatively, is there a different method to store controller variables in a separate location so they do not reset on each page?

javascript angularjs

Answer 1

Answer №1

<div ng-controller="myCtrl">
            <div ng-switch on="condition">
                <div ng-switch-when="condition_output_1">
                   <div ng-include="'html_page_2_url.html'"></div>
                </div>
                <div ng-switch-when="condition_output_2">
                     <div ng-include="'html_page_1_url_2.html'"></div>
                </div>
            </div>
    </div>

Switching the html_page_1_url.html and html_page_2_url.html will not affect the functionality of the code.

myCtrl will remain constant across all instances.

To share data between controllers, you have multiple options:

$rootScope
services
localstorage

Answer 2

<div ng-controller="myCtrl">
            <div ng-switch on="condition">
                <div ng-switch-when="condition_output_1">
                   <div ng-include="'html_page_2_url.html'"></div>
                </div>
                <div ng-switch-when="condition_output_2">
                     <div ng-include="'html_page_1_url_2.html'"></div>
                </div>
            </div>
    </div>

Switching the html_page_1_url.html and html_page_2_url.html will not affect the functionality of the code.

myCtrl will remain constant across all instances.

To share data between controllers, you have multiple options:

$rootScope
services
localstorage

Is it possible to utilize a controller within a page by referencing its controller ID?

Answer №1

Similar questions

Unable to assign a local variable in Jquery .ajax() function to a global variable

What is preventing me from installing React and uninstalling create-react-app from my system?

Error message: "SyntaxError: Unexpected token import was not caught by the foundation"

Transforming text elements into JSON format

Issues encountered with Three.js MeshBasicMaterial functionality

Implementing ng-show based on a specific position on a webpage

"Email verification is always set to true for users signing in through Firebase

Acquire a JSON response from a web address by utilizing JavaScript

Convert the text inside a span element into a key-value object in JavaScript

Automatically populate textboxes with database information based on selected combobox item without the need to refresh the page

Website navigation toolbar with access level control

NodeJS CORS functionality failing to function properly in the Google Chrome browser

Angular 2's Observable does not directly translate to a model

Creating a single page application in Angular2+ using JSON data

Is there a method to update the status of a Jquery UI Mobile navbar using Javascript?

Unable to render $scope on the page

Working with Ruby on Rails by editing a section of embedded Ruby code in a .js.erb file

Troubleshooting problem with rotation and text geometry label on AxisHelper

Sending props to a component without causing it to render(Note: This is

Disable the scroll animation feature for certain IDs