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. 聊一聊log4j2配置文件log4j2.xml

    一.背景 最近由于项目的需要,我们把log4j 1.x的版本全部迁移成log4j 2.x 的版本,那随之而来的slf4j整合log4j的配置(使用Slf4j集成Log4j2构建项目日志系统的完美解决方 ...

  2. C++根据图片url下载图片

    需要使用到URLDownloadToFile()函数,该函数在头文件<urlmon.h>中声明. URLDownloadToFile()函数的定义如下: HRESULT URLDownlo ...

  3. 泛型T的类型获取

    T.getClass()或者T.class都是非法的,因为T是泛型变量. 由于一个类的类型是什么是在编译期处理的,故不能在运行时直接在Base里得到T的实际类型. /** * 可以在service层直 ...

  4. php7 安装redis扩展

    从pecl下载的phpredis扩展在make时报错,google了一下,解决办法,因为phpredis 有专门为php7的分支,所以先git clone phpredis下来 git clone h ...

  5. zsh 命令提示符 PROMPT

    使用上zsh后,发现命令提示符显示不了当前的路径,和一般的Linux系统默认提示不一致.配置自己的提示符: 更改配置文件.zshrc,添加配置PROMPT='%m:%. $',重新打开一个窗口生效. ...

  6. 实现移动设备远程登录linux服务器

    明天下午要考试了.所以最近时间有点紧,都在忙着看矩阵课本,刷刷题. 回到我们博客题目内容,最近正在看linux,之前是通过在笔记本上装着虚拟机的方法来进行操作. 之后发现一些能够进一步改进的地方,首先 ...

  7. Physics(物理系统)

    物理: Physics            Box2d   Unity 内置NVDIA PhysX物理引擎 刚体:要使一个物体在物理控制下,简单添加一个刚体给它.这时,物体将受重力影响,并可以与其他 ...

  8. C++ 系列:内存布局

    转载自http://www.cnblogs.com/skynet/archive/2011/03/07/1975479.html 为什么需要知道C/C++的内存布局和在哪可以可以找到想要的数据?知道内 ...

  9. CheetSheet

    显示端口占用 lsof -i tcp:port sublime 添加到命令行别名 alias subl=\''/Applications/Sublime Text 2.app/Contents/Sha ...

  10. gcc -Wall -pedantic -ansi(转载)

    转载自R-G-Y-CQ的新浪博客 -Wall显示所有的警告信息 -Wall选项可以打开所有类型的语法警告,以便于确定程序源代码是否是正确的,并且尽可能实现可移植性. 对Linux开发人员来讲,GCC给 ...