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


Posted in Javascript onMay 07, 2017

前言

大家如果想在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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 #Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
AngularJS封装$http.post()实例详解
May 06 #Javascript
JavaScript瀑布流布局实现代码
May 06 #Javascript
You might like
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
JavaScript 事件属性绑定带参数的函数
2009/03/13 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
js断点调试经验分享
2017/12/08 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python虚拟环境项目实例
2017/11/20 Python
Python自定义简单图轴简单实例
2018/01/08 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
社区春季防火方案
2014/06/02 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
语文教研活动总结
2014/07/02 职场文书
2014年团支部工作总结
2014/11/17 职场文书
员工年终考核评语
2014/12/31 职场文书
婚前保证书范文
2015/02/28 职场文书
酒店开业主持词
2015/07/02 职场文书
入队仪式主持词
2015/07/04 职场文书
卫生主题班会
2015/08/14 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
Windows7下FTP搭建图文教程
2022/08/05 Servers