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 ...
随机推荐
- 定时器管理:nginx的红黑树和libevent的堆
libevent 发生超时后, while循环一次从堆顶del timer——直到最新调整的最小堆顶不是超时事件为止,(实际是del event),但是会稍后把这个timeout的 event放到ac ...
- UIRefreshControl
在iOS6中UITableViewController 已经集成了UIRefreshControl 控件.UIRefreshControl目前只能用于UITableViewController
- 1.1Axure简介
1.部件:点击部件右上角的?,可以看到相关注释,注释底部有网站链接,可查看部件的详细介绍.
- 3dmax导出到blend或者vs中
使用3dmax将模型导成obj格式的时候,可以导出材质或者不导出. 1.如果不导出,则按下图不勾选导出材质和创建材质库选项.这样生成的obj是可以直接再blend或者vs中打开的. 2.如果导出,不仅 ...
- 统计java中字符串,数组,集合大小(长度)
字符串长度用String.length(); 数组用String[].length; 集合用collection.size();
- UVA 11168 Airport(凸包+直线方程)
题意:给你n[1,10000]个点,求出一条直线,让所有的点都在都在直线的一侧并且到直线的距离总和最小,输出最小平均值(最小值除以点数) 题解:根据题意可以知道任意角度画一条直线(所有点都在一边),然 ...
- jquery 回车事件
简单地记下jquery实现回车事件,代码如下: 全局: $(document).keydown(function(e){ if(e.keyCode==13){ $(".login-li in ...
- select2 清空数据
最近用select2插件,发现用jquery重置不好使,最后搜罗了一把发现下面这个方法可以间接的实现,有空还得看看插件的API $('#integratorId').select2('data', n ...
- 转:学习笔记: Delphi之线程类TThread
学习笔记: Delphi之线程类TThread - 5207 - 博客园http://www.cnblogs.com/5207/p/4426074.html 新的公司接手的第一份工作就是一个多线程计算 ...
- Java对象大小计算
这篇说说如何计算Java对象大小的方法.之前在聊聊高并发(四)Java对象的表示模型和运行时内存表示 这篇中已经说了Java对象的内存表示模型是Oop-Klass模型. 普通对象的结构如下,按64位机 ...