Angular.JS中指令ng-if的注意事项小结
更新时间：2017年06月21日 09:01:41 作者：灰太大
这篇文章主要给大家分享了关于Angular.JS中指令ng-if的一点注意事项，分享出来供大家参考学习，文中介绍的还是相对来说比较详细，对大家具有一定的参考借鉴价值，需要的朋友们下面来一起看看吧。
前言
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 中的作用域
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
现在的项目，无论代销，几乎不会缺省的一个功能就是上传下载功能，今天谈一谈使用AngularJS+bootsrtap下的上传下载功能，需要的朋友参考下吧2017-08-08
本文将介绍Angular子路由的用法，对此感兴趣的同学，可以参考下2021-05-05
全面解析Angular中$Apply()及$Digest()的区别
$apply()和$digest()在AngularJS中是两个核心概念，但是有时候它们又让人困惑。这篇文章主要介绍了Angular中$Apply()及$Digest()区别详细说明的相关资料,需要的朋友可以参考下2016-08-08
本文续上文，接着介绍AngularJS语法，和上文一样，都是通过示例来向大家分析说明，非常不错的一篇文章，推荐给大家。2015-01-01
这篇文章主要介绍了AngularJS入门示例之Hello World,较为详细的分析了AngularJS程序的原理及Hello World程序的创建步骤,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了 AngularJS 所有版本下载地址的相关资料,需要的朋友可以参考下2016-09-09
Angular.js ng-file-upload结合springMVC的使用教程
这篇文章主要给大家介绍了关于Angular.js文件上传控件ng-file-upload结合springMVC的使用教程，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-07-07
基于 angular material theming 机制修改 mat-toolbar 的背景色(示例详解
最近在学习 angular，记录一下昨天的进展，解决的问题是通过 theme 的配置修改 mat-toolbar 的背景色，避免对色彩的硬编码，这篇文章主要介绍了基于 angular material theming 机制修改 mat-toolbar 的背景色,需要的朋友可以参考下2022-10-10
本篇文章主要介绍了详解angular element()方法使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本文主要介绍AngularJS ng-keyup 指令,这里对ng-keyup指令的基本资料进行了整理,并且附有代码示例,有需要的朋友可以看一下2016-08-08
最新评论