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与CSS复习(二)
Jun 29 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
Apr 07 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
Look And Say 序列php实现代码
2011/05/22 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php关联数组快速排序的方法
2015/04/17 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
九州传奇上机题
2014/07/10 面试题
小学清明节活动方案
2014/03/08 职场文书
职工代表大会主持词
2014/04/01 职场文书
排查整治工作方案
2014/06/09 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL