Angular.Js中ng-include指令的使用與實(shí)現(xiàn)
前言
大家如果想在angularjs動(dòng)態(tài)加載一個(gè)內(nèi)容，那我們就可以使用ng-include來實(shí)現(xiàn)。今天Insus.NET就在ASP.NET MVC環(huán)境中，舉個(gè)例子來演示它的功能。
示例介紹
你可以在一個(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ù)呢?。?！
因此，參數(shù)，即是使用model來實(shí)現(xiàn)：
由于ng-include的鏈接，直接給部分視圖名稱或路徑，視圖無法直接Render部分視圖的。
那我們想一個(gè)辦法，寫一個(gè)公用的視圖，所有部分視圖均加載在這個(gè)公用的視圖即可，使用這個(gè)公用的視圖去Render這些部分視圖。
在CommonView操作Action中，我們傳入一個(gè)model，是為了后面?zhèn)鬟f參數(shù)準(zhǔn)備的。
接下來，我把這個(gè)視圖寫好：
渲染部分視圖的Action創(chuàng)建完畢。其也沒有過多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能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
最近工作中會(huì)經(jīng)常遇到一些公用提示，使用框架自帶很多時(shí)候不方便所以便自己編寫了一個(gè)公共提示模塊，下面這篇文章主要介紹了利用Angular.js編寫公共提示模塊的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
AngularJS實(shí)現(xiàn)使用路由切換視圖的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)使用路由切換視圖的方法,結(jié)合學(xué)生信息管理系統(tǒng)為例分析了使用controllers.js控制器來切換視圖的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
AngularJs的$http發(fā)送POST請(qǐng)求,php無法接收Post的數(shù)據(jù)問題及解決方案
這篇文章主要介紹了AngularJs的$http發(fā)送POST請(qǐng)求,php無法接收Post的數(shù)據(jù)的問題及解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
Angular中ng-bind和ng-model的區(qū)別實(shí)例詳解
這篇文章主要介紹了Angular中ng-bind和ng-model的區(qū)別實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯：$watch,$apply,$digest它們是如何工作的呢？這里我想回答這些問題，其實(shí)它們?cè)诠俜降奈臋n里都已經(jīng)回答了，但是我還是想把它們結(jié)合在一起來講2015-10-10
這篇文章主要介紹了AngularJS ng-template寄宿方式用法,結(jié)合實(shí)例形式分析了ng-template模板的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了angularjs自定義過濾器,結(jié)合完整實(shí)例形式分析了angularjs自定義過濾器相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
AngularJs bootstrap搭載前臺(tái)框架——基礎(chǔ)頁(yè)面
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架基礎(chǔ)頁(yè)面的建設(shè)，這里整理餓了相關(guān)資料及實(shí)現(xiàn)實(shí)例代碼，有興趣的小伙伴可以參考下2016-09-09
angularjs在ng-repeat中使用ng-model遇到的問題
本文給大家分享了一個(gè)個(gè)人在使用angular過程中遇到的在ng-repeat中使用ng-model的問題，并附上簡(jiǎn)單的解決辦法，希望能對(duì)大家學(xué)習(xí)angular有所幫助2016-01-01
這篇文章主要介紹了angular4筆記系列之內(nèi)置指令小結(jié),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11