使用AngularJS在控制器中传递数据

Question

I have 2 views in my application. I would like to pass 1st view input to my 2nd view placeholder. I have created a service 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;

});

and below are my 2 differents view 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

I am expecting to get a placeholder with Default message in my 1st form view before i even type my input.

How would i get this to work.

Answer 1

Maybe whatever browser you are testing this in doesn't like the unclosed <div> where you are adding your VideoController :

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

Here is a working 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;
    });

Working JSFiddle with above