Sending Information within Controllers with AngularJS

I have a unique scenario in my application where I need to pass input from one view to another. I have set up a service as shown below:

.service('greeting', function Greeting() {

    var greeting = this;

    greeting.message = 'Default';

})

.controller('LogonController', function LogonController(greeting) {
    var first = this;

    first.greeting = greeting;
})

.controller('VideoController', function VideoController(greeting) {
    var second = this;

    second.greeting = greeting;

});

Here are my two distinct views using different controllers:

<div ng-controller="LogonController as first">
    <form>
        <input type="text" data-ng-model="first.greeting.message" placeholder="{{ first.greeting.message }}"> //1ST VIEW
    </form>
</div>

<div ng-controller="VideoController as second">
    <h1>{{ second.greeting.message }}</h1>
<div> //2ND VIEW

In the 1st form view, I want the placeholder to display the Default message even before any input is entered.

How can I achieve this functionality?

Answer №1

It seems that the browser you are currently using may be having issues with the <div> tag that is not properly closed when adding your VideoController:

<div ng-controller="VideoController as second">
    <h1>{{ second.greeting.message }}</h1>
<div> <-- this should be a closing /div

Below is an updated and corrected version:

<div ng-app="app">
    <div ng-controller="LogonController as first">
        <form>
            <input type="text" data-ng-model="first.greeting.message" placeholder="{{ first.greeting.message }}">
        </form>
    </div>

    <div ng-controller="VideoController as second">
        <h1>{{ second.greeting.message }}</h1>
    </div>
</div>

JS:

angular.module('app', [])
    .service('greeting', function Greeting() {
        var greeting = this;
        greeting.message = 'Default';
    })
    .controller('LogonController', function LogonController(greeting) {
        var first = this;
        first.greeting = greeting;
    })
    .controller('VideoController', function VideoController(greeting) {
        var second = this;
        second.greeting = greeting;
    });

Here is a JSFiddle link for reference

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am trying to access a value saved in a service in Angular 8 component and use it in other services. Can anyone help

Setting a value through a component export class UniqueComponent { constructor(service:UniqueService){ } count =0 ; onRefresh(){ this.service.count = 1; } } Using the value in the service UniqueService{ count:any; doSomething(){ //using count ...

Pass the value of the search input to child components in Angular 2

Within my Angular 2 application, I am faced with the task of sending the value from an HTML search input to 3 child components only when the user pauses typing for 300ms and has entered a different value than what was previously in the input field. After r ...

Asynchronous data fetching with React Hook useEffect does not properly populate the tooltip in Material UI component

After using useEffect to fetch data, I encountered a problem in passing the data to my component. Here is some of my code: User Data Types (UPDATED) export interface IUser { display_name: string; id: string; images: Image[]; } expo ...

"Mastering the Art of Placing the VuetifyJS Popover: A Comprehensive

When using VueJS with VuetifyJS material design components, how can I adjust the positioning of the Vuetify popover component to appear below the MORE button? The current placement is in the upper left corner which I believe defaults to x=0, y=0. Button: ...

Integrating information from various sources to create a cohesive online platform

I am looking to incorporate data from various sources into a single web page: Social networks (Facebook, Twitter, LinkedIn, etc.) RSS feeds Article meta tags (particularly OpenGraph and Twitter cards) This data may change dynamically based on user inter ...

What steps can I take to prevent my menu items from overlapping in the mobile navigation menu?

I am currently working on creating a mobile menu, but I'm facing an issue where the menu items overlap when hovered over. Instead, I want the menu items to move downwards when hovered upon to prevent the text from overlapping. Below is the HTML code ...

Using jQuery to assign the value of a hidden element to data being posted

When using jQuery's post() method to call an ajax action that returns JSON data ({"Success": "true" } or {"Success": "false"}), the value of a hidden HTML element is supposed to be set to the Success value in the returned object. However, after settin ...

Start Vue.js development server with SSL enabled (for secure HTTPS serving)

Issue with Development Environment: Recently, I encountered an obstacle related to enforcing HTTPS on external hosts as explained in "Deprecating Powerful Features on Insecure Origins". This problem arose because I have my development setup on my laptop an ...

Issue with alert dismissal button not visible

I am dynamically updating the alert message: <div id="alert" hidden="hidden"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> </div> $('#alert').addClass("alert alert-dan ...

`The resurgence of CERT_FindUserCertByUsage function in JavaScript`

I am currently grappling with unraveling the connection between C++ dlls and JavaScript. There is a snippet of js code that reads: cert = CERT_FindUserCertByUsage(certDB, certName.nickname,certUsageEmailSigner, true, null); where the variable cert is ini ...

Executing a JavaScript function within a PHP echo statement

I am completely new to working with AJAX and PHP echo variables or arrays. However, I have managed to successfully display images on my website by passing variables from AJAX to PHP and back. The only problem I am encountering is when I try to call a Javas ...

The module instantiation in AngularJS encountered an error

Currently learning AngularJS and attempting to develop an authentication service, but encountering an error. Error: [$injector:modulerr] Failed to create module flujoDeCaja: [$injector:modulerr] Module auth failed to instantiate: [$injector:nomod] Module ...

Confusion surrounding the purpose of an AngularJS controller function

After experimenting with some basic tutorials in AngularJS, I came across a discrepancy in how controllers are declared and used. For instance, in this JSFiddle link - http://jsfiddle.net/dakra/U3pVM/ - the controller is defined as a function name, which w ...

How can you selectively conceal the nth item in a v-for loop while keeping the original array intact? Discover a way to do this using the search function

I have a reference variable called foxArticles that holds a list containing 100 items. Using a v-for loop, I iterate over each value and render all 100 values on the page. <template> <div class="news_container"> <div v- ...

mdcolors not displaying correctly within mddialog component in Angular Material

In my mddialog, I attempted to use md-colors to change the background color of a div within the dialog. Unfortunately, it is not adhering to the current theme and instead defaults to the blue theme. md-colors="{backgroundColor: 'primary'}" Has ...

Combining Summernote images with Node.js using Express.js

While there are numerous solutions available for handling the Summernote file-upload in PHP, I have struggled to find a satisfactory solution for Node.js. Here is My JavaScript: $(document).ready(function() { // $('#summernote').summernote( ...

BufferGeometry: techniques for rendering face groupings

I have 2 different shapes and 2 sets of patterns. My primary objective is to sometimes hide a portion of the first shape (requiring 2 groups) while simultaneously displaying a section of the second shape (only needing 1 group). Prior to the r72 update, I u ...

Variable declared in $scope suddenly losing its definition

Within my directive controller, I've implemented a $watch function as follows: $scope.$watch(function () { return service.abc; }, function(newVal, oldVal) { $scope.abc = {abc: newVal}; }); However, I've encountered issues with the variabl ...

Sending data to a PHP page to maintain state in an Angular application

Here is my current setup: In a dynamic Angular environment, I have various states connected to PHP pages. These PHP pages rely on specific data variables, typically provided as GET parameters outside of Angular. Now, I am looking for a way to switch to a ...

Angular is encountering an issue where it is unable to read the value of a JavaScript function, despite the object having a value

I have developed some JavaScript functions that involve reading and writing to a JSON file, with the intention of calling them in an Angular environment (from TypeScript code) using the jsonfile library. Below is the code snippet: function savePatient(pa ...