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 ...
随机推荐
- SQL SERVER 2008 Reporting Services 的一些小问题集合
实验环境:服务器 Windows Server 2008 R2 Standard 64bit 数据库 SQL SERVER 2008 R2 Standard ...
- SQL SERVER中关于OR会导致索引扫描或全表扫描的浅析
在SQL SERVER的查询语句中使用OR是否会导致不走索引查找(Index Seek)或索引失效(堆表走全表扫描 (Table Scan).聚集索引表走聚集索引扫描(Clustered Index ...
- springmvc学习资料整理
springmvc接口开发返回XML/JSON数据 1.SpringMVC中使用@RequestBody,@ResponseBody注解实现Java对象和XML/JSON数据自动转换(上):http: ...
- C# DESC加密
DESC加密方法 直接上代码: 1.加密 /// <summary> /// 加密 /// </summary> /// <param name="obj&qu ...
- 解决Docker容器时区及时间不同步问题
今天在系统集成测试时由测试人员提交了一个测试bug,原因是提交业务数据时间与实际时间(北京时间)有偏差,导致统计异常.由于我们集成测试是向测试人员直接提供完整的Docker镜像作为测试环境,原因应该是 ...
- java1.8函数式编程概念
有关函数式编程 ·1 函数作为一等公民 特点:将函数作为参数传递给另外一个函数:函数可以作为另外一个函数的返回值 ·2 无副作用 函数的副作用指的是函数在调用过程中,除了给出了返回值外,还修改了函数外 ...
- ireport制作小技巧<Reproduce>
首先ireport中大小写问题: 1.parameter中如果小写,引用也小写 2.$F{},一般都大写 3.子报表中引用父报表中查询出来的值时,只需要小写即可,即在子报表的parameter中只需要 ...
- ubuntu14.04为安装fcitx卸载ibus后出现system setting (系统设置)中图标消失的问题
最近在系统为ubuntu14.04原版中,安装fictx.按照以往的经验应先把ibus卸载干净,否则可能会有冲突.因此惯性思维驱使,先卸载ibus,然后安装fcitx,但是问题出现了,system s ...
- Oracle 中的分析函数
Oracle常用分析函数介绍(排名函数+窗口函数) 2014年11月30日 ⁄ 数据库 ⁄ 共 3903字 ⁄ 暂无评论 ⁄ 阅读 7,772 次 评级函数 常见评级函数如下: RANK():返回数据 ...
- 关于Oracle AUTONOMOUS TRANSACTION(自治事务)的介绍
AUTONOMOUS TRANSACTION(自治事务)的介绍 在基于低版本的ORACLE做一些项目的过程中,有时会遇到一些头疼的问题,比如想在执行当前一个由多个DML组成的transaction(事 ...