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

The component data fails to reflect the updated value following a status change due to not properly retrieving the new result from the POST function

Below is the Vue.js 2 code snippet for sending data to the backend. The vuex library was used to manage the data status. After using the POST function, the result returned from the backend updates the value of sampleId. This value is auto-generated by the ...

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

I've been struggling to apply a class to an HTML element when I click on another element of the page. Despite numerous attempts, it just doesn't seem to work for me. Let's take a look at my code: HTML Code: <div class="container&qu ...

Use Material UI TextField to prompt an email client or make a phone call

I am facing an issue with a MaterialUI TextField component. In certain situations, the TextField is disabled and I want it to be clickable as if it were an anchor tag leading to a phone number or email address. However, it seems that making the input behav ...

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

Issues with React Material UI Dialog Displaying Incorrect Information

As I experiment with React Material UI dialog boxes, I've encountered an issue that has me puzzled. I have an object 'a', and when I click on a button in a list, it should display the respective ID number. However, instead of showing the cor ...

Error: The function jQuery(...).hexColorPicker does not exist

I am attempting to utilize a color-picker jQuery plugin. Below is a screenshot of the JavaScript file: https://i.stack.imgur.com/ovRjx.png Here is the code I am using to initialize it: <script type="text/javascript> jQuery(function(){ ...

Retrieve the Javascript variable and assign it to a PHP variable

When attempting to assign a JavaScript variable to a PHP variable and output the value in an alert, I am encountering an error. The output is shown as "; alert(simple); var p1sds = "My Custom String"; <?php $dsfd = "<script>document.writeln(p ...

How to trigger an update of the useEffect() hook when a button is clicked

I am working with a functional component that contains a button and uses the "useEffect()" hook. My goal is to trigger a re-render of the component, updating the useEffect() hook when the button is clicked. const Emp_list = (props) => { useEffect(() ...

Why is it that a click event outside of an HTML element cannot be detected in this Vue 3 application?

I've been diving into building a Single Page Application using Vue 3, TypeScript, and The Movie Database (TMDB). Currently, I'm focused on developing a search form within my project. Within the file src\components\TopBar.vue, here&apo ...

Is setting cache: 'no-store' in a fetch request enough to mimic client-side rendering behavior in Next.js?

Currently, I am working with Next.js and utilizing the fetch method to retrieve data: const res = await fetch(`${process.env.url}/test`, { cache: 'no-store', }) My understanding is that specifying cache: 'no-store' will trigger a fre ...

Nextjs unexpectedly displays blank page upon fetching data from Firebase Firestore without any error messages

I am currently facing an issue when trying to retrieve page details from Firebase Firestore using getStaticPaths and getStaticProps in my Next.js project. Despite following the code structure correctly, I am encountering a scenario where the page appears e ...

Exploring JSON API Data with Vue Js

While working on my Vue Js project, I encountered an issue with displaying data from an API in JSON format. Despite using this.obj =JSON.stringify(this.Flats); and successfully seeing all the data using console.log, I struggled to loop over and view the pa ...

Empty MongoDB array persists even after POST request

After performing a POST request in Insomnia, my "games" array remains empty. What am I missing? UPDATE: New error after array.push({}) "errorValidationError: games.0.gameID: Path gameID is required., games.0.isGameActivated: Path isGameActivated is requi ...

Ways to customize weekend colors in v-calendar (distinct colors for Saturdays and Sundays)

Looking to customize the appearance of weekends in your calendar by changing their colors? I have a component for the v-calendar that can help with that. Here's the code: <div id='app'> <v-date-picker title-position="left&quo ...

Incorporating CASL with the latest version of Angular, version

I'm currently working on implementing CASL into my Angular application, but I'm having trouble understanding how to integrate it. // Login Component ngOnInit() { var jsonBody = {}; jsonBody['email'] = 'peter@klaven'; ...

What is the method for retrieving the fixed information?

I am currently working on a project that involves creating a course-rating API. We have been given a completed angular application to work with, and our task is to set up the routes without making any changes to the Angular app. One of the initial tasks a ...

Ui-sref does not seem to be creating clickable links or functioning properly

Initially, I had used ng-route and everything was working smoothly. However, after switching to UI Router, I encountered an issue where the links were no longer responsive most of the time. And when they did work randomly, the HTML templates would not disp ...

Service data not being rendered in Angular template

There seems to be an issue with the template file not displaying data from the service file. I've checked that the data is being passed by the controller, but nothing is showing up except for index. I've tried different ways of data binding with ...

REACT Issue: Unable to Select Dropdown Option with OnChange Function

I have a component that includes a select element. Upon clicking an option, the OnProductChange function returns the value. However, my e.target.value shows as [Object Object]. Yet, {console.log(product)} displays: {id: 1, name: "VAM"} Clicking on Add L ...

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

I've recently designed an input field for inputting details of items. In order to effectively capture and save the entered information, which of the following event handlers would be most suitable? onClick onChange onLoad onKeyPress ...