angular中的ng-if和ng-show的區別以及ng-if的作用域問題


  項目有個需求是區分用戶的身份,需要設置顯示兩個浮動框,根據不同的身份顯示相應的浮動框。

  點擊成功顯示,以為一切大吉了,但因為一個插件需要再設置初始化,設置成功后發現 因為插件使用的是一個div,如果有兩個浮動框的話會導致初始化失敗,不巧的是這還是個主要功能。


  想了想,就使用ng-if在他需要的時候再去創建這個dom節點,結果就是插件初始化成功了,但是ng-model的值取不到了。我轉而用了ng-show去判斷浮動框的顯示與否,發現好像又回到了起點,插件初始化又不成功了,以前使用這兩個的時候知道ng-if是通過判斷表達式的值為true或false來決定是否創建dom節點,ng-show是通過判斷表達式的值用css的display:none和display:block來顯示和隱藏。想想自己的需求知道用ng-show是鐵定不成功的,怎么辦?查唄。

  經過提問和查閱之后,解釋是這樣的:官方解釋ng-if :表達式內值為true是,生成標簽內的DOM,否則移除官方解釋ng-show:表達式內值為true是,顯示標簽內的DOM,否則隱藏。ng-if同no-show和ng-hide指令最本質的區別是,它不是通過CSS顯示或隱藏DOM節點,而是真正生成或移除節點。ng-if 表達式內的值初始為false的時候 他里面的由input的 model綁定的scope是不會存在作用域里面的,當if的值為true的時候,相當於生成了一個新的SCOPE值,但是原先的watch仍然是檢測不到新生成的model的值的。

  這也就是說:

    ng-if這個指令單獨開了一個作用域,它只可以繼承,不可以進行往外傳值,所以,必須要在要傳值的地方給加上$parent

    例如我要將(ng-model=“item”),我要獲得query,這是打印不出的,只能(ng-model=“$parent.item”);

  搜嘎,問題解決,大吉大利!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM