Angular.JS中指令ng-if的注意事项小结


Posted in Javascript onJune 21, 2017

前言

ng-if指令可以根据表达式的值true/false在DOM中真正生成或真正移除一个元素。如果赋值给ng-if的表达式的值是false,那对应的元素将会从DOM中移除,否则对应元素的一个克隆将被重新插入DOM中。

ng-if同ng-show和ng-hide指令最本质的区别是,它不是通过CSS显示或隐藏DOM节点,而是真正生成或移除节点。

当一个元素被ng-if从DOM中移除,同它关联的作用域也会被销毁。而且当它重新加入DOM中时,会通过原型继承从它的父作用域生成一个新的作用域。

这样会导致,在 ng-if 中用基本变量绑定 ng-model ,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。

示例代码:

<p>{{name}}</p>

<div ng-if="true">

<input type="text" ng-model="name" />

</div>

ng-show 不存在此问题,因为它不自带一级作用域。

避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。详见 AngularJS 中的作用域

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 5 - 链式实现)
Aug 04 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
JS实现简单拖拽效果
Jun 21 #Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 #Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 #Javascript
详解angular 中的自定义指令之详解API
Jun 20 #Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
Jun 20 #Javascript
You might like
php 404错误页面实现代码
2009/06/22 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
本地机apache配置基于域名的虚拟主机详解
2013/08/10 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
js null undefined 空区别说明
2010/06/13 Javascript
Node.js实用代码段之获取Buffer对象字节长度
2016/03/17 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
iview中Select 选择器多选校验方法
2018/03/15 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
pytorch 自定义数据集加载方法
2019/08/18 Python
Python使用python-docx读写word文档
2019/08/26 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
期终自我鉴定
2014/02/17 职场文书
求职简历自我评价范文
2015/03/10 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书
卫生主题班会
2015/08/14 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
用JS写一个发布订阅模式
2021/11/07 Javascript