Angular.Js中ng-include指令的使用與實現(xiàn)
前言
大家如果想在angularjs動態(tài)加載一個內(nèi)容,那我們就可以使用ng-include來實現(xiàn)。今天Insus.NET就在ASP.NET MVC環(huán)境中,舉個例子來演示它的功能。
示例介紹
你可以在一個視圖動態(tài)加載任一其它視圖。如果你的動態(tài)內(nèi)容有很多部件,你得需要在控制器創(chuàng)建相應(yīng)的Action操作,如使用部分Partial view就不必創(chuàng)建相對應(yīng)的Action。因此這是Insus.NET所喜歡的。
另外,我們還需要為ng-include的鏈接帶些參數(shù)呢!?。?/p>
因此,參數(shù),即是使用model來實現(xiàn):
由于ng-include的鏈接,直接給部分視圖名稱或路徑,視圖無法直接Render部分視圖的。
那我們想一個辦法,寫一個公用的視圖,所有部分視圖均加載在這個公用的視圖即可,使用這個公用的視圖去Render這些部分視圖。
在CommonView操作Action中,我們傳入一個model,是為了后面?zhèn)鬟f參數(shù)準(zhǔn)備的。
接下來,我把這個視圖寫好:
渲染部分視圖的Action創(chuàng)建完畢。其也沒有過多html的代碼。
下面創(chuàng)建2個部分視圖,當(dāng)然實際環(huán)境中,也許不止2個啦。
部分視圖_View1:
部分視圖2:
前面一切準(zhǔn)備好,均是為了下面ng-include的演示:
程序運(yùn)行結(jié)果:
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家學(xué)習(xí)或者使用Angular.js能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
詳解使用KeyValueDiffers檢測Angular對象的變化
這篇文章主要為大家介紹了KeyValueDiffers檢測Angular對象的變化使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文,你將學(xué)會使用?resolver,?在?Angular?App?中應(yīng)用?resolver,應(yīng)用到一個公共的預(yù)加載導(dǎo)航,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07初學(xué)者AngularJS的環(huán)境搭建過程
這篇文章主要介紹了初學(xué)者AngularJS的環(huán)境搭建過程,在文章給大家提到了Angular-cli的特性,大家一起看看吧2017-10-10angula中使用iframe點(diǎn)擊后不執(zhí)行變更檢測的問題
這篇文章主要介紹了angula中使用iframe點(diǎn)擊后不執(zhí)行變更檢測問題,本文給大家分享解決方案,通過實例代碼給的大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05angular中實現(xiàn)li或者某個元素點(diǎn)擊變色的兩種方法
本篇文章主要介紹了angular中實現(xiàn)li或者某個元素點(diǎn)擊變色的兩種方法,非常具有實用價值,需要的朋友可以參考下2017-07-07淺談angularjs $http提交數(shù)據(jù)探索
這篇文章主要介紹了淺談angularjs $http提交數(shù)據(jù)探索,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-01-01解決angularjs WdatePicker ng-model的問題
今天小編就為大家分享一篇解決angularjs WdatePicker ng-model的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09