Angular.JS中指令ng-if的注意事項小結(jié)
前言
ng-if指令可以根據(jù)表達式的值true/false在DOM中真正生成或真正移除一個元素。如果賦值給ng-if的表達式的值是false，那對應(yīng)的元素將會從DOM中移除，否則對應(yīng)元素的一個克隆將被重新插入DOM中。
ng-if同ng-show和ng-hide指令最本質(zhì)的區(qū)別是，它不是通過CSS顯示或隱藏DOM節(jié)點，而是真正生成或移除節(jié)點。
當(dāng)一個元素被ng-if從DOM中移除，同它關(guān)聯(lián)的作用域也會被銷毀。而且當(dāng)它重新加入DOM中時，會通過原型繼承從它的父作用域生成一個新的作用域。
這樣會導(dǎo)致，在 ng-if 中用基本變量綁定 ng-model ，并在外層 div 中把此 model 綁定給另一個顯示區(qū)域，內(nèi)層改變時，外層不會同步改變，因為此時已經(jīng)是兩個變量了。
示例代碼：
<p>{{name}}</p>
<div ng-if="true">
<input type="text" ng-model="name" />
</div>
ng-show 不存在此問題，因為它不自帶一級作用域。
避免這類問題出現(xiàn)的辦法是，始終將頁面中的元素綁定到對象的屬性（data.x）而不是直接綁定到基本變量（x）上。詳見 AngularJS 中的作用域
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
現(xiàn)在的項目，無論代銷，幾乎不會缺省的一個功能就是上傳下載功能，今天談一談使用AngularJS+bootsrtap下的上傳下載功能，需要的朋友參考下吧2017-08-08
本文將介紹Angular子路由的用法，對此感興趣的同學(xué)，可以參考下2021-05-05
全面解析Angular中$Apply()及$Digest()的區(qū)別
$apply()和$digest()在AngularJS中是兩個核心概念，但是有時候它們又讓人困惑。這篇文章主要介紹了Angular中$Apply()及$Digest()區(qū)別詳細說明的相關(guān)資料,需要的朋友可以參考下2016-08-08
本文續(xù)上文，接著介紹AngularJS語法，和上文一樣，都是通過示例來向大家分析說明，非常不錯的一篇文章，推薦給大家。2015-01-01
這篇文章主要介紹了AngularJS入門示例之Hello World,較為詳細的分析了AngularJS程序的原理及Hello World程序的創(chuàng)建步驟,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了 AngularJS 所有版本下載地址的相關(guān)資料,需要的朋友可以參考下2016-09-09
Angular.js ng-file-upload結(jié)合springMVC的使用教程
這篇文章主要給大家介紹了關(guān)于Angular.js文件上傳控件ng-file-upload結(jié)合springMVC的使用教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
基于?angular?material?theming?機制修改?mat-toolbar?的背景色(示例詳解
最近在學(xué)習(xí)?angular，記錄一下昨天的進展，解決的問題是通過?theme?的配置修改?mat-toolbar?的背景色，避免對色彩的硬編碼，這篇文章主要介紹了基于?angular?material?theming?機制修改?mat-toolbar?的背景色,需要的朋友可以參考下2022-10-10
本篇文章主要介紹了詳解angular element()方法使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
AngularJS基礎(chǔ) ng-keyup 指令簡單示例
本文主要介紹AngularJS ng-keyup 指令,這里對ng-keyup指令的基本資料進行了整理,并且附有代碼示例,有需要的朋友可以看一下2016-08-08