directive ngIf

ngIf指令删除或重新创建基于表达式的DOM树的一部分。如果分配给ngIf的表达式计算为假值，那么元素将从DOM中删除，否则元素的克隆将被重新注入到DOM中。

ngIf不同于ngHide和ngShow，ngIf完全删除并重新创建DOM中的元素，而不是通过显示的css属性更改其可见性。当这种差异非常明显时，一个常见的情况是使用依赖于DOM中的元素位置的css选择器，例如::first-child or :last-child的伪类。

注意，当使用ngIf删除元素时，它的作用域将被销毁，当元素被恢复时将创建一个新的范围。在ngIf中创建的范围从其父范围继承了原型继承。这是一个重要的暗示，如果ngIf中使用了ngModel来绑定到在父范围内定义的javascript原语。在这种情况下，对子范围内变量的任何修改将覆盖(隐藏)父范围内的值。

另外，ngIf使用编译后的状态重新创建元素。这种行为的一个例子是，如果元素的class属性在编译后被直接修改，使用jQuery的.addClass()方法，然后删除元素。当ngIf重新创建元素时，添加的类将会丢失，因为原始编译的状态被用于重新生成元素。

转载于:https://www.cnblogs.com/ms-grf/p/7009073.html

directive ngIf相关推荐

Angular ng-template元素的学习笔记
ng-template: As the name suggests the ng-template is a template element that Angular uses with struc ...
react 生命挂钩_角生命周期挂钩：ngOnChanges，ngOnInit等
react 生命挂钩为什么我们需要生命周期挂钩? (Why do we need lifecycle hooks?) Modern front-end frameworks move the app ...
浅谈Angular如何自定义创建指令@Directive
知识普及 Angular 指令根据其创建形式分为内置指令和自定义指令,指令按照类型分: 模板指令--组件就是模板指令(只能自定义) 属性型指令 -- 更改元素.组件或其他指令的外观或行为的指令(有内 ...
Angular 下的 directive （part 2）
ngCloak ngCloak指令被使用在,阻止angular模板从浏览器加载的时候出现闪烁的时候.使用它可以避免闪烁问题的出现. 该指令可以应用于<body>元素,但首选使用多个ng ...
angularjs 1.3 综合学习 (one way bind , ng-if , ng-switch , ng-messages, ng-form ,ng-model )
主要讲解1.3后的一些新功能,和一些以前没有介绍的小功能 (ng-if,ng-switch). 1.one way bind 这个之前的版本已经有人自己实现了,但是在1.3之后,angularjs 有 ...
Angular5 *ngIf 和 hidden 的区别
问题项目中遇到一个问题,有一个过滤查询的面板,需要通过一个展开折叠的button,来控制它的show 和 hide.这个面板中,有一个Select 组件,一个 input 查询输入框. 原来代码是: ...
Angular 的 ngIf 和 NgIf 有何区别
在Angular官方文档里,可以看到ngIf和NgIf这两种拼写混杂使用. NgIf 指的是指令类: ngIf 指的是指令的属性名称. 指令类以 UpperCamelCase (NgIf) 拼写. 指 ...
html中 n怎么使用方法,如何在html注释中使用ngIf？
AngularJS有限制使用ng-if仅限于attribute由A如下所示.所以,你不能在comment var ngIfDirective = ['$animate', function($anim ...
手写ngIf，使用视图容器引用ViewContainerRef和模板引用TemplateRef
写这篇博客的原有:虽然Angular官网有提到指令的使用,以及相关Ref的使用,但是对相关Ref并没有做出详细的解释,也没有提供相关的详细文档. 明确 *ngIf 是一个结构型指令,需要 @Direc ...

directive ngIf

directive ngIf相关推荐

最新文章

热门文章