angular input标签只能单向传递数据的问题
Posted 真相让人自由
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" />
我也遇到了这个问题，貌似事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
以上是关于angular input标签只能单向传递数据的问题的主要内容，如果未能解决你的问题，请参考以下文章
Angular @Input 数组 - 如何引用不同的数组对象字段名称？