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加载模板的更多相关文章

  1. Angular通过XHR加载模板而限制使用file://(解决方案)

    编写angular项目时,遇到此困难: angular.js:12011 XMLHttpRequest cannot load file:///E:/angular/imooc/chapter2/bo ...

  2. Lodop 动态加载模板,动态加载数据

    最近需要使用Lodop打印控件,所以就研究了一下,期间从网上找了诸多的东西,基本全是对HTML进行打印的,没有找到我想要的,就只好自己动手丰衣足食. 这篇文章主要讲述的是Lodop与数据的结合使用,官 ...

  3. NOPI导出加载模板

    ListExcel导出(加载模板) /// <summary> /// List根据模板导出ExcelMemoryStream /// </summary> /// <p ...

  4. 指向“**js/shop.js”的 <script> 加载失败

    指向“”的 <script> 加载失败 找了半天没找到原因 原来是meta里面的 csp Content-Security-Policy <meta http-equiv=" ...

  5. 指向“”的 script 加载失败

    今天遇到了一个非常奇怪的问题:在某个同时的电脑上,所有浏览器无法打开某个页面,F12查看控制台,发现有一个黄色的 指向“xxxx.js”的 <script> 加载失败 的提示.该外部js文 ...

  6. Freemarker提供了3种加载模板目录的方法

    Freemarker提供了3种加载模板目录的方法 原创 2016年08月24日 14:50:13 标签: freemarker / Configuration 8197 Freemarker提供了3种 ...

  7. MarkDown富文本编辑器怎么加载模板文件

    我们只需要一段加载代码就可以搞定MarkDown加载模板文件. $("#md-demo").bind('click', function () { $.get("/Lib ...

  8. script加defer="defer" 的意义

    <script defer="defer">alert("页面加载完我才执行的")</script>先看到这段话 然后再执行上面的 JS ...

  9. 不使用 webpack,vuejs 异步加载模板

    webpack 打包不会玩,整了这么个小玩具 一段 vue 绑定代码,关键点在 gmallComponent 1.异步加载外部 vue 文件(非 .vue) 2.按一定规则拆分 template.sc ...

随机推荐

  1. 【hive】——Hive sql语法详解

    Hive 是基于Hadoop 构建的一套数据仓库分析系统,它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,可以将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...

  2. linux 排序命令sort

    sort [选项] [文件] 选项: -b:忽略每行前面开始出的空格字符: -c:检查文件是否已经按照顺序排序: -d:排序时,处理英文字母.数字及空格字符外,忽略其他的字符: -f:排序时,将小写字 ...

  3. extjs学习资料

    ExtJs 入门教程 1.Extjs5.1.0教程云盘地址 http://pan.baidu.com/s/1qYhHiEw 2.Extjs3.x如下:   ExtJs 入门教程一[学习方法] ExtJ ...

  4. nginx 301 永久重定向

    nginx301跳转设置很简单,配置如下. (配置文件默认为nginx.conf,如果制定了新的配置文件,在新的文件配置即可.) server{ server_name xxx.com www.xxx ...

  5. 博客代码美化(SyntaxHighlighter)

    这篇博文主要讲解自己使用SyntaxHighlighter对代码进行美工中遇见的问题以及如何使用SyntaxHighlighter? 首先来看看SyntaxHighlighter对代码美工的效果吧! ...

  6. 重构与模式(Refactoring to Patterns)-读书笔记

    第一章 ☛过度设计:是指代码的灵活性和复杂性超出所需. 第二章 ☛重构是一种保持行为的转换. 第三章 ☛每一个模式都是由三部分组成的规则,他表达的是某一环境,一个问题以及解决问题的方案之间的关系. ☛ ...

  7. Codeforces Round #378 (Div. 2)

    A: 思路: 水题,没啥意思; B: 思路: 暴力,也没啥意思; C: 思路: 思维,可以发现从前往后和为b[i]的分成一块,然后这一块里面如果都相同就没法开始吃,然后再暴力找到那个最大的且能一开始就 ...

  8. 【Python数据分析】Python3操作Excel(二) 一些问题的解决与优化

    继上一篇[Python数据分析]Python3操作Excel-以豆瓣图书Top250为例 对豆瓣图书Top250进行爬取以后,鉴于还有一些问题没有解决,所以进行了进一步的交流讨论,这期间得到了一只尼玛 ...

  9. backbone学习总结(二)

    今天来看下backbone的路由控制的功能.其实个人感觉backbone,模块就那么几个,熟悉它的框架结构,以及组成,就差不多. 废话不多说,我们来看看还剩下的功能. 关于路由和历史管理 通过 Bac ...

  10. 有关sql server 2008无法导入数据库mdf文件的处理方法

    解决方法1:根据该博客中的引导,加上自己安装版本的细节,可以添加成功 http://www.2cto.com/database/201408/328930.html 解决方法2: 根据<数据库系 ...