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. oracleDBA-D2

    1.超级管理员sys和system的区别: sys权限比system大,system无法查看到当前数据库是否运行在归档模式下,无法关闭数据库.sys是老大,system是老二. 2.OEM-oracl ...

  2. OC中的__attribute__的使用

    简介: 在IOS9.2官方文档中Attributes的描述如下,简单明了: Attributes provide more information about a declaration or typ ...

  3. 聊一聊log4j2配置文件log4j2.xml

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

  4. List提取相同元素

    List<int> currentList = Cls_Data.SoruceDataIntses[key]; preList = currentList.Intersect(preLis ...

  5. Cocoapods - pod install 成功后找不到头文件解决

    问题描述:使用Cocoapods时,import 找不到头文件. 问题原因:这是因为还没设置头文件的目录. 解决办法:在项目的Target的里设置一下,添加cocoapods头文件目录:目录路径直接写 ...

  6. 如何获取苹果手机的UDID

    获取苹果手机的UDID有很多种,比如Xcode,iTunes等等吧,个人比较推荐使用iTunes,因为比较官方,而且苹果电脑自带的有,而且Windows也可以下载安装. 1.下载安装itunes(点击 ...

  7. JS 数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  8. 数学系列:XXX

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  9. RSA算法学习

    package com.test.rsa; /* * 为了选择公钥和私钥,Bob必须执行如下步骤: * 1)选择两个大素数p和q.那么p和q应该多大呢?该值越大,RSA越难于破解,但是执行加密和解密所 ...

  10. 3 3Sum closest_Leetcode

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...