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. ORACLE的SQL JOIN方式小结

    在ORACLE数据库中,表与表之间的SQL JOIN方式有多种(不仅表与表,还可以表与视图.物化视图等联结),官方的解释如下所示 A join is a query that combines row ...

  2. .NET应用架构设计—重新认识分层架构(现代企业级应用分层架构核心设计要素)

    阅读目录: 1.背景介绍 2.简要回顾下传统三层架构 3.企业级应用分层架构(现代分层架构的基本演变过程) 3.1.服务层中应用契约式设计来解决动态条件不匹配错误(通过契约式设计模式来将问题在线下暴露 ...

  3. 删除Windows中隐藏的物理网卡和网络虚拟化失败后的虚拟网卡

    Windows环境下,在更换硬件服务器主板和网卡等硬件.恢复操作系统或者网络虚拟化失败后,可能会出现网卡方面的问题.例如,设备管理器中多了不应该存在的网卡:因命名冲突无法重命名当前网络连接:IP地址冲 ...

  4. Consul Windows 安装

    下载文件https://www.consul.io/downloads.html, 解压完毕后只有一个consul文件 consul 启动一个 Agent consul agent -server - ...

  5. WPF 自定义CheckBox

    WPF中原始的CheckBox样式很简单,有时候不适用于WPF那种炫酷的界面. 本章节讲述如何设计一个匹配业务需要.好看的CheckBox(继上篇<WPF-自定义ListBox>中的Che ...

  6. 使用JNI封装底层input系统提供的event事件

    首先说下思路,本文采用jni技术封装底层触摸事件,封装成MotionEvent类一样,不过没有android系统MotionEvent强大.源码MotionEvent位置:java-->fram ...

  7. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  8. 【CSS】过渡、动画和变换

    1. 使用过渡 过渡效果一般是由浏览器直接改变元素的CSS属性实现的.例如,如果使用:hover选择器,一旦用户将鼠标悬停在元素之上,浏览器就会应用跟选择器关联的属性. <!DOCTYPE ht ...

  9. NYOJ 205

    大数取模算法: 这个又不同于幂取模算法,对于几百万位的数字取模,直接的方法是行不通的.最好利用数论的知识 (a*b)%c = ((a%c)*b)%c ;利用这个公式我们只要从n的一次方开始不断计算,乘 ...

  10. MATLAB数字图像处理基础

    图像的输入.输出和显示 1.图像的输入    imread('filename'),  实际中写的是 >> f = imread('sky.jpg'); 2.图像的显示    imshow ...