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" />
答案对人有帮助,有参考价值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

angular input标签只能单向传递数据的问题的更多相关文章

  1. Angular路由——在路由时候传递数据

    有3种方式 1.在查询参数中传递数据 2.在路由路径中传递数据 定义路由路径时就要指定参数名字,在实际路径中携带参数. 3.在路由配置中传递数据 一.在查询参数中传递数据 第一步:修改模版中商品详情链 ...

  2. input 标签只能输入数字

    $("input[name='contact']").keyup(function(){ $("input[name='contact']").attr(&qu ...

  3. 控制input标签中只能输入数字以及小数点后两位

    js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...

  4. angular 4 router传递数据三种方法

    1.在查询参数中传递数据 <a  [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}& ...

  5. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  6. Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】

    利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...

  7. Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  8. Angular 4 路由时传递数据

    路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数 一.在查询参数中传递数据 在前一节的基础上,我们增加路由数据传递 2. 接收参数的地方 3. ...

  9. html input标签 要求只能输入纯数字

    在input标签添加以下代码即可 oninput = "value=value.replace(/[^\d]/g,'')" <input type="text&qu ...

随机推荐

  1. iOS企业分发证书制作

    自签名证书制作流程 打开终端,输入 openssl genrsa - ,生成名称为ca的秘钥 注:openssl生成的文件皆放在用户文档下(finder菜单栏'前往' - 电脑 -Macintosh ...

  2. 【Django】--Model字段

    参考地址:http://www.cnblogs.com/wupeiqi/articles/6216618.html 所有字段 AutoField(Field) --int自增列,必须填入参数prima ...

  3. PowerDisner15 关于生成表带双""号问题

    我们可以尝试在DBMS配置文件中修改相应的格式来解决. 在PowerDesigner中 选择 Database->Edit current database->Script->Sql ...

  4. Qt在ui中使用代码添加新的控件

    QLabel* label = new QLabel(ui->centralWidget);

  5. ajaxform使用

    需要引入  jquery.form.js  jquery.js 1.提交的表单 <form id="myForm" action="comment.php" ...

  6. PHP 二维数组根据某个字段排序

    二维数组根据某个字段排序有两种办法,一种是通过sort自己写代码,一种是直接用array_multisort排序函数 一. 手写arraysort PHP的一维数组排序函数: sort  对数组的值按 ...

  7. 配置Visual Studio Code在Mac上作为.NET Core的IDE

    通过邮件发一文档测试一下. 关于Visual Studio Core 官网:https://www.visualstudio.com/en-us/products/code-vs.aspx 安装 也是 ...

  8. .NET 需要处理的高性能WEB架构 - .NET架构

    1.如果不想被微软包围(其实微软的一套并不贵,是被谣言传高了),数据层依然可以选择SQL Server数据库和存储过程. 2.缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布 ...

  9. linux中redis安装

    一.登录redis官网下载redis-3.0.7.tar.gz 二.通过ftp工具上传至自己的服务器中 三.tar -zxvf redis-3.0.7.tar.gz解压 四.cd redis-3.0. ...

  10. c语言结构体

    [C语言]21-结构体 本文目录 一.什么是结构体 二.结构体的定义 三.结构体变量的定义 四.结构体的注意点 五.结构体的初始化 六.结构体的使用 七.结构体数组 八.结构体作为函数参数 九.指向结 ...