使用AngularJS在控制器中傳遞數據

我在我的應用程序中有2個視圖。我想將第一個視圖輸入傳遞給我的第二個視圖佔位符。我已經創建了下面使用AngularJS在控制器中傳遞數據

.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; 

});

和下方的服務是我的2型動物視圖中使用不同的控制器

<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

我期待着得到與默認消息佔位符在我的第一個表格視圖之前，我甚至型我輸入。

我將如何得到這個工作。

來源

2016-03-23 jaahvicky

什麼不工作？你不會得到灰色的佔位符文本，因爲你也有'data-ng-model =「first.greeting.message」'它設置輸入的值。 – Lex

我想實現的是在第一個視圖中輸入的輸入文本顯示在第二個視圖上。例如，如果我輸入我的名字，它應該顯示在第二個視圖中。我希望我有道理。 – jaahvicky

如果它不適合你，那麼控制檯中肯定會出現某種錯誤。我只是嘗試了你在JSFiddle中提供的代碼，它工作正常。 – Lex

也許無論你的瀏覽器正在測試這並不像未關閉<div>在其中添加您的VideoController：

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

這裏是一個工作版本：

<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

來源

2016-03-23 20:03:15 Lex

使用AngularJS在控制器中傳遞數據

回答

相關問題