网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

Angular.Js中ng-include指令的使用与实现

前言

创新互联专业为企业提供和硕网站建设、和硕做网站、和硕网站设计、和硕网站制作等企业网站建设、网页设计与制作、和硕企业网站模板建站服务,10多年和硕做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

大家如果想在angularjs动态加载一个内容,那我们就可以使用ng-include来实现。今天Insus.NET就在ASP.NET MVC环境中,举个例子来演示它的功能。

示例介绍

你可以在一个视图动态加载任一其它视图。如果你的动态内容有很多部件,你得需要在控制器创建相应的Action操作,如使用部分Partial view就不必创建相对应的Action。因此这是Insus.NET所喜欢的。

另外,我们还需要为ng-include的链接带些参数呢!!!

因此,参数,即是使用model来实现:

Angular.Js中ng-include指令的使用与实现

由于ng-include的链接,直接给部分视图名称或路径,视图无法直接Render部分视图的。

那我们想一个办法,写一个公用的视图,所有部分视图均加载在这个公用的视图即可,使用这个公用的视图去Render这些部分视图。

Angular.Js中ng-include指令的使用与实现

在CommonView操作Action中,我们传入一个model,是为了后面传递参数准备的。

接下来,我把这个视图写好:

Angular.Js中ng-include指令的使用与实现

渲染部分视图的Action创建完毕。其也没有过多html的代码。

下面创建2个部分视图,当然实际环境中,也许不止2个啦。

部分视图_View1:

Angular.Js中ng-include指令的使用与实现

部分视图2:

Angular.Js中ng-include指令的使用与实现

前面一切准备好,均是为了下面ng-include的演示:

Angular.Js中ng-include指令的使用与实现 

程序运行结果:

Angular.Js中ng-include指令的使用与实现

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对创新互联的支持。


当前名称:Angular.Js中ng-include指令的使用与实现
链接地址:http://bjjierui.cn/article/gdepgp.html

其他资讯