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路由——在路由时候传递数据
有3种方式 1.在查询参数中传递数据 2.在路由路径中传递数据 定义路由路径时就要指定参数名字,在实际路径中携带参数. 3.在路由配置中传递数据 一.在查询参数中传递数据 第一步:修改模版中商品详情链 ...
- input 标签只能输入数字
$("input[name='contact']").keyup(function(){ $("input[name='contact']").attr(&qu ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- angular 4 router传递数据三种方法
1.在查询参数中传递数据 <a [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}& ...
- vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...
- Angular学习笔记 ——input 标签上的【name属性】和【ngModelOptions属性】
利用“@angular/forms" 创建<form>表单的时候,系统默认会创建一个”FormGroup"的对象. 使用带有“ngModel"的”<in ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- Angular 4 路由时传递数据
路由时传递数据的方式有 1. 在查询参数中传递数据 2. 在路由路径中传递参数 3. 在路由配置中传递参数 一.在查询参数中传递数据 在前一节的基础上,我们增加路由数据传递 2. 接收参数的地方 3. ...
- html input标签 要求只能输入纯数字
在input标签添加以下代码即可 oninput = "value=value.replace(/[^\d]/g,'')" <input type="text&qu ...
随机推荐
- iOS企业分发证书制作
自签名证书制作流程 打开终端,输入 openssl genrsa - ,生成名称为ca的秘钥 注:openssl生成的文件皆放在用户文档下(finder菜单栏'前往' - 电脑 -Macintosh ...
- 【Django】--Model字段
参考地址:http://www.cnblogs.com/wupeiqi/articles/6216618.html 所有字段 AutoField(Field) --int自增列,必须填入参数prima ...
- PowerDisner15 关于生成表带双""号问题
我们可以尝试在DBMS配置文件中修改相应的格式来解决. 在PowerDesigner中 选择 Database->Edit current database->Script->Sql ...
- Qt在ui中使用代码添加新的控件
QLabel* label = new QLabel(ui->centralWidget);
- ajaxform使用
需要引入 jquery.form.js jquery.js 1.提交的表单 <form id="myForm" action="comment.php" ...
- PHP 二维数组根据某个字段排序
二维数组根据某个字段排序有两种办法,一种是通过sort自己写代码,一种是直接用array_multisort排序函数 一. 手写arraysort PHP的一维数组排序函数: sort 对数组的值按 ...
- 配置Visual Studio Code在Mac上作为.NET Core的IDE
通过邮件发一文档测试一下. 关于Visual Studio Core 官网:https://www.visualstudio.com/en-us/products/code-vs.aspx 安装 也是 ...
- .NET 需要处理的高性能WEB架构 - .NET架构
1.如果不想被微软包围(其实微软的一套并不贵,是被谣言传高了),数据层依然可以选择SQL Server数据库和存储过程. 2.缓存不再依赖.net自身提供的缓存机制,迁移到部署在Linux平台上的分布 ...
- linux中redis安装
一.登录redis官网下载redis-3.0.7.tar.gz 二.通过ftp工具上传至自己的服务器中 三.tar -zxvf redis-3.0.7.tar.gz解压 四.cd redis-3.0. ...
- c语言结构体
[C语言]21-结构体 本文目录 一.什么是结构体 二.结构体的定义 三.结构体变量的定义 四.结构体的注意点 五.结构体的初始化 六.结构体的使用 七.结构体数组 八.结构体作为函数参数 九.指向结 ...