搬运自:https://blog.csdn.net/fenglongmiao/article/details/81545993

    https://blog.csdn.net/Spearmint_/article/details/102470350?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

    https://www.sheyingtg.com/detail/320191.html

与其他指令一样,ng-controller指令也会创建一个子级作用域,因此,如果在ng-controller指令中添加了元素,并向元素属性增加 ng-model指令,那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑定时,需要引起注意。

在ng-controller方式中,每个包含的元素都拥有自己的作用域,因此,复选框元素也拥有自己的$scope作用域。相对于控制器作用域来说,这个作用域属于一个子级作用域,所以,如果它想绑定控制器中的变量值,必须添加$parent标识,只有这样才能访问到控制器中的变量。

scope.$parent——指向scope的父作用域,在子级作用域中使用scope.$parent.name,来获取对父级作用域的双向绑定。

我的问题:初始化搜索关键字为空字符,控制器始终监听不到关键词输入的变化。

解决方案:在绑定值时添加$parent标识

html:

<input type="text" ng-model="$parent.searchTxt" ng-change="listenTxt()">

js:

$scope.searchTxt = '';

$scope.listenTxt=function(){
console.log('searchTxt',$scope.searchTxt);
}

同理,ng-if指令也会创建一个子级作用域,想要ng-model生效,需要在scope创建一个子对象才行

 解决方式:

1.使用$parent

2.使用ng-show(或ng-hide)可以间接解决这个问题。

3.使用$scope创建一个子对象,如

$scope.a = {num: '1'};
<input type="text" ng-model="a.num">

angularJs input框绑定ng-model后js获取不到问题的更多相关文章

  1. 腾讯云图片鉴黄集成到C# SQL Server 怎么在分页获取数据的同时获取到总记录数 sqlserver 操作数据表语句模板 .NET MVC后台发送post请求 百度api查询多个地址的经纬度的问题 try{}里有一个 return 语句,那么紧跟在这个 try 后的 finally {}里的 code 会 不会被执行,什么时候被执行,在 return 前还是后? js获取某个日期

    腾讯云图片鉴黄集成到C#   官方文档:https://cloud.tencent.com/document/product/641/12422 请求官方API及签名的生成代码如下: public c ...

  2. 取值:form表单取值、input框绑定取值

    1. form表单取值1.1 方式一,通过<form bindsubmit="formSubmit">与<button formType="submit ...

  3. 小程序开发 绑定自定义数据data- 及JS获取

    1wxml<!-- 茶系显示隐藏函数sectionSelect --><view class="img-fur" data-id="{{item.id} ...

  4. 【小程序】微信小程序绑定企业微信后怎样获取到用户信息

    一.获取access_token 1.https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRECT Cor ...

  5. 通过定时监听input框来实现onkeyup事件-

    问题:因为zepto无法使用onkeyup 事件 解决方法:通过给input框绑定focus 事件,定时的去监听input的值得改变,在鼠标移出input后,清除定时器 <!DOCTYPE ht ...

  6. bootstrap的两种在input框里面增加一个图标的方式

    具体代码如下: <div class="input-group"> <div class="input-icon-group"> < ...

  7. el-mement表单校验-校验失败时自动聚焦到失败的input框

    思路:调用input的focus()事件,聚焦到失败的input框上, 问题:如何获取失败的input框,结合element的校验方法,查看可以提供入口的地方 调用this.$refs[formNam ...

  8. js input框输入1位数字后自动跳到下一个input框聚焦

    // input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); f ...

  9. js—input框中输入数字,动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

随机推荐

  1. 深入JAVA虚拟机笔记

    1.对堆的理解: a):所有的对象实例以及数据都要在堆中分配 b):新生代和老年代存在于堆中

  2. 分布式-技术专区-Redis分布式锁实现-第二步

    再上次篇章中汇集了相关的分布式锁的概念进行控制,接下来我们采用的是注解声明式开发服务方案,进行声明式开发代替编程式开发方案.  1.利用aop实现分布式锁2.只用在方法上加个注解,同时加上了重试机制 ...

  3. git 的版本控制

    作为全球第一大代码托管平台,github 成为了许多人的选择,所以这里写一下关于GitHub的有关知识,写这个的目的还是巩固自己的学习,一方面可以提高自己,另一方面回头看一下,有什么更深层次的东西还可 ...

  4. Spring学习笔记(4)——IoC学习

    IoC理论的背景我们都知道,在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 图1:软件系统中耦合的对象 如果我们打开机械式手表 ...

  5. android 数据异步加载

    public class MainActivity extends Activity { ListView listView; File cache; //访问其他线程在当前线程中存放的数据 Hand ...

  6. PHP-组合总和

    给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制重复被选 ...

  7. vue中key的作用

    1.v-if中用key管理可复用的元素  Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染.这么做,除了使 Vue 变得非常快之外,还有一些有用的好处.例如,如果你允许用户在不同的 ...

  8. JPA中遇到一些异常的分析与解决

    Spring Data JPA踩坑到填坑:1 JPA多对多关 //作者表 //书籍表 Book和Author是多对多关系 先放两张图做个说明:Jpa底层依赖于hibernate,hibernate默认 ...

  9. Apache解析漏洞复现(CVE-2017-15715),可以绕过黑名单

    照着P神的文章准备复现一下(总结一下经验) 环境的安装 这里面直接使用的vulhub里面的环境来进行安装的(为了方便吗) 基础环境如下    实际上Apache版本在2.4.0~2.4.29即可 i ...

  10. RabbitMQ-----的基本安装

    RabbitMQ的基本安装 一 docker下安装RabbitMQ 首先使用 docker search rabbitmq命令查找docker仓库是否存在rabbitmq镜像,可以发现docker仓库 ...