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