angular input標籤只能單向傳遞數據的問題

angularjs input標籤只能單向傳遞數據的問題

 

<ion-view title = "{{roomName}}" style = "height:90%;margin-top: 45px " ng-init = "init()"> <ion-pane> <ion-content zooming = "true" class = "no-header"> <ion-list> <ion-item class="item item-input-inset"> <label class="item-input-wrapper"> <input type="text" placeholder="Your Message To Send" ng-model = "myMessage"> </label> <button class="button button-small" ng-click = "sendMyMessage()"> 發送 </button> </ion-item> </ion-list> </ion-content> </ion-pane> <ion-pane style = "margin-top: 55px"> <ion-content zooming = "true" class = "no-header" style = "margin-bottom: 50px"> <ion-list> <ion-item class = "item item-avatar-left my-item" collection-repeat = "message in messages" collection-item-width="'100%'" collection-item-height="75"> <img ng-src="{{message.user.avatarUrl}}"> <h2>{{message.user.name}}:</h2> <p>{{message.content}}</p> </ion-item> </ion-list> </ion-content> </ion-pane> </ion-view> 

個人controller

atMoon.controller('roomCtrl',['$scope','myService', function ($scope, myService) { $scope.sendMyMessage = function () { console.log($scope.myMessage) myService.sendMyMessage($scope, $scope.myMessage) } $scope.init = function () { myService.getMessages($scope); } }]) 

打印的$scope.myMessage一直是undefine,若是我在controller中寫上$scope.myMessage = "xxxx"能再界面中顯示，因此數據只能從模型到視圖，不能從視圖到模型，求大神解答萬分感謝

 

我懷疑你這是被 scope 的原型繼承坑了

像 ion-content 這些指令都是有各自的 scope 的，而後你在視圖裏寫上 ng-model="myMessage" ，其實你在輸入框填入的內容是放到了 ion-item 的 scope 上了，而你的 roomCtrl 的 scope 裏的 myMessage 依舊是 undefined ；而當你在控制器裏給 myMessage 賦值完了之後，因爲 ion-item 的 scope 上尚未 myMessage 屬性，因此就會從原型鏈上找，進而找到了 roomCtrl 的 scope 上的 myMessage 。

這是我經常使用的解決方案：

$scope.ctrlScope = $scope 

<input ng-model="ctrlScope.myMessage" /> 

• 2014年09月14日回答
 
• 2 評論

c4605 790 聲望

答案對人有幫助，有參考價值 0答案沒幫助，是錯誤的答案，答非所問

我也遇到了這個問題，貌似事angular.js-1.3.0版本的問題，低版本沒出現過，進過測試實驗，將myMessage放到一個Object中以下，能夠測試經過，也不知道爲啥（可能新版angular的優化了watch，watch過多會影響效率）：

controller中設置
$scope.Messages={myMessage:""}

$scope.sendMyMessage = function () { console.log($scope.Messages.myMessage); } <input ng-model="Messages.myMessage" /> 另外我用angular.js正在開發webapp，能夠交流下，http://php.xlanlab.com/webapp/mobile-angular-ui-master/my/index.html