angular.js - angularjs input标签只能单向传递数据的问题

Question

我的界面

 <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"能再界面中显示，所以数据只能从模型到视图，不能从视图到模型，求大神解答万分感谢

Answer 1

Je soupçonne que vous avez été trompé par l'héritage prototypique de Scope

Ces commandes comme ion-content ont leurs propres portées. Ensuite, vous écrivez ng-model="myMessage" dans la vue. En fait, le contenu que vous remplissez dans la zone de saisie est placé sur la portée de ion-item, et vous roomCtrl. dans la portée de myMessage est toujours undefined ; et après avoir attribué une valeur à myMessage dans le contrôleur, puisqu'il n'y a pas d'attribut ion-item sur la portée de myMessage, cela changera de Recherche sur le chaîne de prototypes, puis recherchez roomCtrl sur le périmètre de myMessage.

Voici ma solution préférée :

$scope.ctrlScope = $scope

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

Answer 2

J'ai également rencontré ce problème. Cela semble être un problème avec la version angulaire.js-1.3.0. Il n'est pas apparu dans les versions inférieures. J'ai fait une expérience de test et mis myMessage dans un objet comme suit. être testé et réussi, je ne sais pas pourquoi (peut-être que la nouvelle version d'Angular a optimisé les montres, trop de montres affecteront l'efficacité) :

Défini dans le contrôleur
$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