angular.js - The problem that angularjs input tags can only transmit data in one direction

Question

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()">
                            发送
                        </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

Answer 1

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" />

Answer 2

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正在开发webapp，可以交流下，http://php.xlanlab.com/webapp/mobile-angular-ui-master/my/index.html