AngularJS API Reference
auto
auto/service
auto/service/$injector
auto/service/$provide
ng
ng/directive
ng/directive/a
ng/directive/form
ng/directive/input
ng/directive/input[checkbox]
ng/directive/input[date]
ng/directive/input[dateTimeLocal]
ng/directive/input[email]
ng/directive/input[month]
ng/directive/input[number]
ng/directive/input[radio]
ng/directive/input[text]
ng/directive/input[time]
ng/directive/input[url]
ng/directive/input[week]
ng/directive/ngApp
ng/directive/ngBind
ng/directive/ngBindHtml
ng/directive/ngBindTemplate
ng/directive/ngBlur
ng/directive/ngChange
ng/directive/ngChecked
ng/directive/ngClass
ng/directive/ngClassEven
ng/directive/ngClassOdd
ng/directive/ngClick
ng/directive/ngCloak
ng/directive/ngController
ng/directive/ngCopy
ng/directive/ngCsp
ng/directive/ngCut
ng/directive/ngDblclick
ng/directive/ngDisabled
ng/directive/ngFocus
ng/directive/ngForm
ng/directive/ngHide
ng/directive/ngHref
ng/directive/ngIf
ng/directive/ngInclude
ng/directive/ngInit
ng/directive/ngKeydown
ng/directive/ngKeypress
ng/directive/ngKeyup
ng/directive/ngList
ng/directive/ngModel
ng/directive/ngModelOptions
ng/directive/ngMousedown
ng/directive/ngMouseenter
ng/directive/ngMouseleave
ng/directive/ngMousemove
ng/directive/ngMouseover
ng/directive/ngMouseup
ng/directive/ngNonBindable
ng/directive/ngOpen
ng/directive/ngPaste
ng/directive/ngPluralize
ng/directive/ngReadonly
ng/directive/ngRepeat
ng/directive/ngSelected
ng/directive/ngShow
ng/directive/ngSrc
ng/directive/ngSrcset
ng/directive/ngStyle
ng/directive/ngSubmit
ng/directive/ngSwitch
ng/directive/ngTransclude
ng/directive/ngValue
ng/directive/script
ng/directive/select
ng/directive/textarea
ng/filter
ng/filter/currency
ng/filter/date
ng/filter/filter
ng/filter/json
ng/filter/limitTo
ng/filter/lowercase
ng/filter/number
ng/filter/orderBy
ng/filter/uppercase
ng/function
ng/function/angular.bind
ng/function/angular.bootstrap
ng/function/angular.copy
ng/function/angular.element
ng/function/angular.equals
ng/function/angular.extend
ng/function/angular.forEach
ng/function/angular.fromJson
ng/function/angular.identity
ng/function/angular.injector
ng/function/angular.isArray
ng/function/angular.isDate
ng/function/angular.isDefined
ng/function/angular.isElement
ng/function/angular.isFunction
ng/function/angular.isNumber
ng/function/angular.isObject
ng/function/angular.isString
ng/function/angular.isUndefined
ng/function/angular.lowercase
ng/function/angular.module
ng/function/angular.noop
ng/function/angular.toJson
ng/function/angular.uppercase
ng/object
ng/object/angular.version
ng/provider
ng/provider/$animateProvider
ng/provider/$compileProvider
ng/provider/$controllerProvider
ng/provider/$filterProvider
ng/provider/$httpProvider
ng/provider/$interpolateProvider
ng/provider/$locationProvider
ng/provider/$logProvider
ng/provider/$parseProvider
ng/provider/$rootScopeProvider
ng/provider/$sceDelegateProvider
ng/provider/$sceProvider
ng/service
ng/service/$anchorScroll
ng/service/$animate
ng/service/$cacheFactory
ng/service/$compile
ng/service/$controller
ng/service/$document
ng/service/$exceptionHandler
ng/service/$filter
ng/service/$http
ng/service/$httpBackend
ng/service/$interpolate
ng/service/$interval
ng/service/$locale
ng/service/$location
ng/service/$log
ng/service/$parse
ng/service/$q
ng/service/$rootElement
ng/service/$rootScope
ng/service/$sce
ng/service/$sceDelegate
ng/service/$templateCache
ng/service/$timeout
ng/service/$window
ng/type
ng/type/$cacheFactory.Cache
ng/type/$compile.directive.Attributes
ng/type/$rootScope.Scope
ng/type/angular.Module
ng/type/form.FormController
ng/type/ngModel.NgModelController
ngAnimate
ngAnimate/provider
ngAnimate/provider/$animateProvider
ngAnimate/service
ngAnimate/service/$animate
ngCookies
ngCookies/service
ngCookies/service/$cookies
ngCookies/service/$cookieStore
ngMessages
ngMessages/directive
ngMessages/directive/ngMessage
ngMessages/directive/ngMessages
ngMock
ngMock/function
ngMock/function/angular.mock.dump
ngMock/function/angular.mock.inject
ngMock/function/angular.mock.module
ngMock/object
ngMock/object/angular.mock
ngMock/provider
ngMock/provider/$exceptionHandlerProvider
ngMock/service
ngMock/service/$exceptionHandler
ngMock/service/$httpBackend
ngMock/service/$interval
ngMock/service/$log
ngMock/service/$timeout
ngMock/type
ngMock/type/angular.mock.TzDate
ngMockE2E
ngMockE2E/service
ngMockE2E/service/$httpBackend
ngResource
ngResource/service
ngResource/service/$resource
ngRoute
ngRoute/directive
ngRoute/directive/ngView
ngRoute/provider
ngRoute/provider/$routeProvider
ngRoute/service
ngRoute/service/$route
ngRoute/service/$routeParams
ngSanitize
ngSanitize/filter
ngSanitize/filter/linky
ngSanitize/service
ngSanitize/service/$sanitize
ngTouch
ngTouch/directive
ngTouch/directive/ngClick
ngTouch/directive/ngSwipeLeft
ngTouch/directive/ngSwipeRight
ngTouch/service
ngTouch/service/$swipe
?
Ce document utilise Manuel du site Web PHP chinois Libérer
personnages
AngularJS: API: ng/directive/ngIf
ngIf
- - directive in module ng
ngIf指令基于{表達式}來移除或重建DOM樹的一部分。如果賦給 ngIf的表達式計算結(jié)果為假，元素會從DOM移除，其它情況會復(fù)制一份元素插入到DOM中。
ngIf 不同于 ngShow 和 ngHide ， ngIf 是在DOM中完全移除或重建元素，而不是通過 display css 屬性改變可見。一種常見的情況是，這種差異表現(xiàn)在依靠一個元素在DOM的位置使用CSS選擇器時，例如 :first-child 或 :last-child 偽類。
注意，當(dāng)一個元素使用 ngIf 移除時，它的域會被銷毀，并且當(dāng)它恢復(fù)時一個新域會被創(chuàng)建。使用 ngIf 創(chuàng)建的域通過 原型繼承繼承它的父域。這個的重要含義是，如果在 ngIf 中使用ngModel會綁定到一個父域的javascript原始定義。這種情況下任何修改都會使子域的變化覆蓋父域的值。
同時， ngIf使用自己編譯狀態(tài)來重建元素。 這種行為的一個例子是，如果一個元素的class屬性在它編譯后被直接修改，使用像 jQuery's .addClass() 方法等，并且元素之后被刪掉。當(dāng)ngIf 重建元素，class屬性中已添加的類會丟失，因為會使用原始編譯狀態(tài)來重生成元素。
此外， 你可以通過 ngAnimate 模塊來執(zhí)行動畫，控制 enter 和 leave 的效果。
指令信息
- 這個指令會創(chuàng)建新的作用域(scope)。
- 這個指令執(zhí)行優(yōu)先級為600.
用法
- 作為屬性使用:
<ANY ng-if=""> ... </ANY>
動畫
enter - 在ngIf內(nèi)容改變時發(fā)生，并且一個新DOM元素會被創(chuàng)建和加入到ngIf容器中。
leave - 在ngIf內(nèi)容從DOM移除時發(fā)生。
點擊這里 了解更多關(guān)于涉及動畫的步驟。參數(shù)
| 參數(shù) | 類型 | 詳述 |
|---|---|---|
| ngIf | expression | 如果表達式為假，元素從DOM樹移除。如果為真，復(fù)制一份已編譯過的元素添加到DOM樹。 |
示例
index.html
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:<span ng-if="checked" class="animate-if">
I'm removed when the checkbox is unchecked.
</span>animations.css
.animate-if {
background:white;
border:1px solid black;
padding:10px;}
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;}
.animate-if.ng-enter,.animate-if.ng-leave.ng-leave-active {
opacity:0;}
.animate-if.ng-leave,.animate-if.ng-enter.ng-enter-active {
opacity:1;}