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. WPF如何控制每个窗体确保只打开一次

    在主窗体上点击菜单时,如果做到每个窗体不会被重复打开,如果打开了,可以将其重新获得焦点. 首先在主窗体中将菜单关联的窗体实例化. 第二步:将每个菜单对应窗体的closing事件重写.之所以要重写clo ...

  2. 多个html怎么导入相同的头部导航

    1. iframe 包含法.页头和页尾分别做成一个页面,然后通过iframe嵌入到调用的页面.这种方法在页头页尾高度固定的时候比较适用,因为当页头页尾高度不固定时,需要iframe根据页面内容自适应高 ...

  3. dubbo配置

    Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合).从服务模型的角度来看,Dubbo采用的是一种非常简单的模 ...

  4. 百度地图API显示多个标注点带检索框

    通过百度地图的api,可以在地图上显示多个标注点,并给所有的标注点实现了带检索功能的信息框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  5. My year of 2016

    2016, year of excellence.   Year of happiness. In Beijing we can also find some happiness which is s ...

  6. 一个轻量级分布式RPC框架--NettyRpc

    1.背景 最近在搜索Netty和Zookeeper方面的文章时,看到了这篇文章<轻量级分布式 RPC 框架>,作者用Zookeeper.Netty和Spring写了一个轻量级的分布式RPC ...

  7. CozyRSS开发记录12-MVVM,绑定RSS源和数据

    CozyRSS开发记录12-MVVM,绑定RSS源和数据 1.引入MvvmLight MVVM最近貌似在前端那块也挺火的.据说,WPF的程序如果不用MVVM,那跟MFC和winform的,也没啥区别. ...

  8. 【CentOS】LAMP相关3

    调优,安全如果是运维一个网站,PHP搭建的话,可能会出现500的错误,白页怎么去排查呢,今天就涉及到这方面的东西 http://blog.csdn.net/bsi_l4/article/details ...

  9. 1.4 jQuery方法,JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  10. [已解决]:调用 LoadLibraryEx 失败,在 ISAPI 筛选器 "c:\Windows\Microsoft.NET\Framework\v4.0.30319\\aspnet_filter.

    现象:我的是 win7, iis7, 64bit, 打开网站错误如下: 错误摘要 HTTP 错误 500.0 - Internal Server Error 调用 LoadLibraryEx 失败,在 ...