My interface
<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()">
發(fā)送
</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>
My 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);
}
}])
The printed $scope.myMessage is always undefine. If I write $scope.myMessage = "xxxx" in the controller, it can be displayed in the interface, so the data can only go from the model to the view, not from the view to the model. Please Thank you very much for the answer
I suspect that you have been fooled by the prototypal inheritance of scope
Like ion-content
這些指令都是有各自的 scope 的,然后你在視圖里寫上 ng-model="myMessage"
,其實你在輸入框填入的內容是放到了 ion-item
的 scope 上了,而你的 roomCtrl
的 scope 里的 myMessage
依舊是 undefined
;而當你在控制器里給 myMessage
賦值完了以后,由于 ion-item
的 scope 上還沒有 myMessage
屬性,所以就會從原型鏈上找,進而找到了 roomCtrl
的 scope 上的 myMessage
.
This is my go-to solution:
$scope.ctrlScope = $scope
<input ng-model="ctrlScope.myMessage" />
I also encountered this problem. It seems to be a problem with angular.js-1.3.0 version. It has not appeared in lower versions. I have done a test experiment and put myMessage into an Object as follows. It can pass the test. I don’t know why. (Maybe the new version of Angular has optimized watches, and too many watches will affect efficiency):
Set in controller$scope.Messages={myMessage:""}
$scope.sendMyMessage = function () {
console.log($scope.Messages.myMessage);
}
<input ng-model="Messages.myMessage" />
另外我用angular.js正在開發(fā)webapp,可以交流下,http://php.xlanlab.com/webapp/mobile-angular-ui-master/my/index.html