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