ngInclude与script加载模板
ng-include:
官网实例:
<p>ng-include:</p>
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <span>{{template.url}}</span>
<div>
<div ng-include="template.url"></div>
</div>
$scope.templates = [
{'name':'template1.html','url':'ngincludetemplate1.html'},
{'name':'template2.html','url':'ngincludetemplate2.html'}
];
$scope.template = $scope.templates[0];
ngincludetemplate1.html:
<p>content of ngincludetemplate1</p>
ngincludetemplate2.html:
<p>content of ngincludetemplate2</p>
选择的是template1.html时会显示ngincludetemplate1.html页面的内容:相当于<div ng-include=" 'ngincludetemplate1.html' "></div>
选择的是template2.html时会显示ngincludetemplate2.html页面的内容:相当于<div ng-include=" 'ngincludetemplate2.html' "></div>
也可以简单地写成如下形式:
<div ng-include=" 'ngIncludetemplate2.html' "></div>
<div ng-include="tpl"></div>
<div ng-include src="tpl"></div>
$scope.tpl = 'ngIncludetemplate2.html';
此处的值是字符串,所以直接在ng-include写值时要加上''(单引号),或者在js定义一个变量,ng-include引入值时引用变量名即可。
script:
<div ng-include="'template1.html'"></div><!--直接引用id值(字符串类型)-->
<div ng-include src="'template2.html'"></div><!--src:直接引用id值(字符串类型)-->
<div ng-include="scriptTpl3"></div><!--引用变量,变量值是id值(字符串类型)-->
<div ng-include src="scriptTpl4"></div><!--src:引用变量,变量值是id值(字符串类型)-->
<script type="text/ng-template" id="template1.html">
使用script加载的模板,ng-include字符串
</script>
<script type="text/ng-template" id="template2.html">
使用script加载的模板,ng-include src字符串
</script>
<script type="text/ng-template" id="template3.html">
使用script加载的模板,ng-include变量
</script>
<script type="text/ng-template" id="template4.html">
使用script加载的模板,ng-include src变量
</script>
$scope.scriptTpl3 = 'template3.html';
$scope.scriptTpl4 = 'template4.html';
这里需要注意,type="text/ng-template"
是指明这是ng模板,id属性是指实际使用模板时的一个引用,标签之间的内容才是实际的模板内容。而且,需要注意,id绝对不是URL,这个script
标签绝对不会发出HTTP请求。
实际应用模板时候,使用ID
属性,即可从内存中获取对应数据。
参考:https://www.zybuluo.com/bornkiller/note/6023
ngInclude与script加载模板的更多相关文章
- Angular通过XHR加载模板而限制使用file://(解决方案)
编写angular项目时,遇到此困难: angular.js:12011 XMLHttpRequest cannot load file:///E:/angular/imooc/chapter2/bo ...
- Lodop 动态加载模板,动态加载数据
最近需要使用Lodop打印控件,所以就研究了一下,期间从网上找了诸多的东西,基本全是对HTML进行打印的,没有找到我想要的,就只好自己动手丰衣足食. 这篇文章主要讲述的是Lodop与数据的结合使用,官 ...
- NOPI导出加载模板
ListExcel导出(加载模板) /// <summary> /// List根据模板导出ExcelMemoryStream /// </summary> /// <p ...
- 指向“**js/shop.js”的 <script> 加载失败
指向“”的 <script> 加载失败 找了半天没找到原因 原来是meta里面的 csp Content-Security-Policy <meta http-equiv=" ...
- 指向“”的 script 加载失败
今天遇到了一个非常奇怪的问题:在某个同时的电脑上,所有浏览器无法打开某个页面,F12查看控制台,发现有一个黄色的 指向“xxxx.js”的 <script> 加载失败 的提示.该外部js文 ...
- Freemarker提供了3种加载模板目录的方法
Freemarker提供了3种加载模板目录的方法 原创 2016年08月24日 14:50:13 标签: freemarker / Configuration 8197 Freemarker提供了3种 ...
- MarkDown富文本编辑器怎么加载模板文件
我们只需要一段加载代码就可以搞定MarkDown加载模板文件. $("#md-demo").bind('click', function () { $.get("/Lib ...
- script加defer="defer" 的意义
<script defer="defer">alert("页面加载完我才执行的")</script>先看到这段话 然后再执行上面的 JS ...
- 不使用 webpack,vuejs 异步加载模板
webpack 打包不会玩,整了这么个小玩具 一段 vue 绑定代码,关键点在 gmallComponent 1.异步加载外部 vue 文件(非 .vue) 2.按一定规则拆分 template.sc ...
随机推荐
- MYSQL复制
今天我们聊聊复制,复制对于mysql的重要性不言而喻,mysql集群的负载均衡,读写分离和高可用都是基于复制实现.下文主要从4个方面展开,mysql的异步复制,半同步复制和并行复制,最后会简单聊下第三 ...
- WordPress建站和搭独立博客
之前有帮外面的公司建站的经历 不去管html css js 服务器脚本等 对于菜鸟新手而言, 一个WAMP + WordPress(博客程序)就够了 都弄好了再部署到云端服务器上 其实整个过程只是安装 ...
- gcc编译过程简述
在linux系统上,从源文件到目标文件的转化是由编译器完成的.以hello.c程序的编译为例,如下: dfcao@linux: gcc -o hello hello.c 在这里,gcc编译器读取源文件 ...
- BOOST.Asio——Tutorial
=================================版权声明================================= 版权声明:原创文章 谢绝转载 啥说的,鄙视那些无视版权随 ...
- Centos 安装jdk1.8
我是根据右边链接进行安装的 ,但是第一步不同噢.http://www.cnblogs.com/spiders/archive/2016/09/06/5845727.html 1.下载rpm安装文件. ...
- Java 多态
多态通过分离做什么和怎么做,从另一个角度将接口和实现分离开来. 继承允许将对象视为它自己本身的类型活基类型来加以处理. 方法调用绑定 绑定: 将一个方法调用同一个方法主体关联起来. 前期绑定:在程序执 ...
- ASP.NET MVC 5 with EF 6 上传文件
参考 ASP.NET MVC 5 with EF 6 - Working With Files Rename, Resize, Upload Image (ASP.NET MVC) ASP ...
- Java读带有BOM的UTF-8文件乱码原因及解决方法
原因: 关于utf-8编码的txt文件,windows以记事本方式保存时会在第一行最开始处自动加入bom格式的相关信息,大概三个字节! 所以java在读取此类文件时第一行时会多出三个不相关的字节,这样 ...
- 数据库SQL基本操作
1.查询表结构 desc 表名 2.显示当前连接用户 show user 3.查看系统拥有哪些用户 select * from all_users; 4.查询当前用户下所有对象 select * fr ...
- 10款.net 图形插件
在如今这个读图时代,图形图表的可视化数据表现形式已成为一种趋势.因为图表能直观的展示信息.对比和趋势等,所以许多项目开发中都需要用到图表控件,而很多图表控件都是在.NET平台下开发的,今天就为大家推荐 ...