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 单表排序,相同值排序
两种方式: 第一种是利用笛卡尔积,两对比排序 -- 学校类型数据 SELECT t.examid,'-' AS unitcode,t.schooltype,'-' AS classname,t.bkr ...
- JavaScript 易错知识点整理
本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...
- SpringMVC 处理异常的4种方式
springmvc处理异常有三种方式: 1.在一个controller中定义一个方法,用@ExceptionHandler注解标注.(优先级最高) @ExceptionHandler public M ...
- Windows 10 安装双系统 CentOS 7
系统环境:Windows 10 && CentOS 7 准备工具: ●CentOS7 官网下载地址:https://wiki.centos.org/Download (注意: i386 ...
- 002.php安装(lnmp)
搭建lnmp环境时,需要先安装mysql,再安装php,而nginx安装顺序无所谓,nginx与php之间的联系需要手动配置 一.php下载和配置“安装环境“ [root@huh ~]# cd /us ...
- stm32定时器实现60秒定时秒表
#include "led.h" #include "delay.h" #include "key.h" #include "sy ...
- windows常用端口对应表
端口概念 在网络技术中,端口(Port)大致有两种意思:一是物理意义上的端口,比如,ADSL Modem.集线器.交换机.路由器用于连接其他网络设备的接口,如RJ-45端口.SC端口等等.二是逻辑意义 ...
- 浏览器请求页面时Etag和cache的区别
etag:简单的说就是服务器收到客户端的请求后,根据返回的内容计算出来一个etag值,返回给客户端,当客户端下次再请求相同路径的时候会带上之前的etag值,服务器端会根据这次请求应该返回的内容计算出新 ...
- [diango]批量导入不重复数据
去年研究导入数据的时候写了一个批量导入数据的脚本,但有个问题,如果导入这批数据在数据库中已经存在,那么我们导入的数据不就重复了么,本文就讨论如何解决这个问题? 程序如下: #coding:utf-8 ...
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...