转自:https://www.cnblogs.com/best/tag/Angular/

获取、编译并引用一个外部HTML片段(也可以是内部的)

默认情况下,模板URL被强制为使用与应用文档相同的域名和协议。这是通过调用$sce.getTrustedResourceUrl 实现的。为了从其它的域名和协议载入模板,你可以采用 白名单化 或 包裹化 任一手段来作为可信任值。参考 Angular的 强上下文转义。
此外,浏览器的 同源策略 和 交叉源资源共享(CORS) 策略会进一步限制模板是否能成功载入。例如,ngInclude 在所有浏览器上不能进行交叉域请求,一些浏览不能访问 file:// 等。

<ng-include src="" [onload=""] [autoscroll=""]></ng-include>
<ANY ng-include="" [onload=""] [autoscroll=""]></ANY>
<ANY class="ng-include: ; [onload: ;] [autoscroll: ;]"> </ANY>

外部包含:

外部包含是指包含一个独立的外部文件。

包含时请注意中间页面地址要加引号,需要的是一个字符,如果不加会认为是一个变量。

header.html

<header>
<h2>欢迎光临天狗商城</h2>
</header>

footer.html

 <style>
.cls1 {
background: lightblue;
height: 100px;
line-height: 100px;
text-align: center;
}
</style>
<footer class="cls1">
<h3>版本所有 违者必究</h3>
</footer>

d05.html

 <!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01"> <head>
<meta charset="UTF-8">
<title>指令</title>
</head> <body>
<!--指定控制器的作用范围-->
<form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
<ng-include src="header"></ng-include>
<ng-include src="'header.html'"></ng-include>
<div ng-include="'footer.html'"></div>
</form>
<!--引入angularjs框架-->
<script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//定义模块,指定依赖项为空
var app01 = angular.module("app01", []);
//定义控制器,指定控制器的名称,$scope是全局对象
app01.controller("Controller1", function($scope) {
});
function regTest()
{
var reg1=new RegExp("\d","igm");
var reg2=/\d/igm; var str="This is some bad,dark evil text";
str=str.replace(/bad|dark|evil/igm,"Happy");
console.log(str); //取出Hello Hello
var str="<input value='Hello'/><input value='World'/>";
//将value中的内容前后增加一个*
}
regTest();
</script>
</body> </html>

运行结果:

内部包含:

先定义模板,指定id与类型,模板中可以是任意片段:

<script id="p1" type="text/ng-template">

引用模板,模板中可以使用angular表达式,引用的方法与外部包含一样。

 <!DOCTYPE html>
<!--指定angular管理的范围-->
<html ng-app="app01"> <head>
<meta charset="UTF-8">
<title>指令</title>
</head> <body>
<!--指定控制器的作用范围-->
<form ng-controller="Controller1" name="form1" ng-init="header='header.html'">
<ng-include src="header"></ng-include>
<ng-include src="'header.html'"></ng-include> <script id="template1" type="text/ng-template">
您想购买的商品是:{{product}}
</script> <ng-include src="'template1'" onLoad="product='SD卡'"></ng-include>
<ng-include src="'template1'" onLoad="product='TF卡'"></ng-include> <div ng-include="'footer.html'"></div>
</form>
<!--引入angularjs框架-->
<script src="js/angular146/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//定义模块,指定依赖项为空
var app01 = angular.module("app01", []);
//定义控制器,指定控制器的名称,$scope是全局对象
app01.controller("Controller1", function($scope) {
});
function regTest()
{
var reg1=new RegExp("\d","igm");
var reg2=/\d/igm; var str="This is some bad,dark evil text";
str=str.replace(/bad|dark|evil/igm,"Happy");
console.log(str); //取出Hello Hello
var str="<input value='Hello'/><input value='World'/>";
//将value中的内容前后增加一个*
}
regTest();
</script>
</body> </html>

运行结果:

上面的结果都是“TF卡”的原因是因为模板是先包含再解析的,后定义的变量覆盖前面定义的,并不是一边包含一边渲染的。

7.包含(ng-Include)的更多相关文章

  1. 请求包含(Include)和请求转发(Forward)

    定义 请求包含是指将另一个Servlet的请求处理流程包含进来. 请求转发是指将请求转发给别的Servlet处理. 实现 实现请求包含和请求转发,可以使用HttpServletRequest的getR ...

  2. PHP 文件包含总结 include require 命名空间 autoload spl_autoload_register 读取文件路径

    总结: 1. include或require包含其他文件 使用./或者 ../,这里的当前路径和上一层路径,取决于运行脚本的路径,会存在如下问题. 在写PHP程序时,经常要用到include或requ ...

  3. c++ 头文件包含问题-include&class

    http://blog.csdn.net/jiajia4336/article/details/8996254 前向声明概念(forward declaration) 在程序中引入了类类型的B.在声明 ...

  4. jsp的静态包含与动态包含:<%@ include file="" %>和<jsp:include page=""></jsp:include>区别与分析

    <%@ include file="" %>是将文件原封不动的copy进现有的文件中,像是拼接好后,再编译成为servlet运行. <jsp:include pa ...

  5. 玩转Web之Jsp(一)-----jsp中的静态包含(<%@include file="url"%>)与动态包含(<jsp:include>)

    在jsp中include有两种形式,其中<%@include file="url"%>是指令元素,<jsp:include page="" f ...

  6. JSP基本语法--包含指令<%@include file="路径"%> <jsp:include page>

    包含指令,真正改变的地方只有具体内容处: 方法1: 在每个jsp页面(HTML)都包含工具栏,头部信息,尾部信息,具体内容 方法2: 将工具栏,头部信息,尾部信息都分成各个独立的文件,使用的时候直接导 ...

  7. Flask08 包含(include)、继承(extends)、宏???、模板中变量的来源、利用bootstrap构建自己的网页结构

    1 包含 直接把另一个文件的内容,复制粘贴过来 {% include "模板路径" %} 注意:模板都是放在 templates 这个文件夹下面的,可以在里面新建文件夹来进行分离: ...

  8. IIS7.5支持html页面包含(include)html页面

    前提条件: ServerSideIncludeModule的安装: 在安装iis的时候选择上该服务(“在服务端包含文件”,选项)即可,如下: 1:处理映射程序 添加模块映射 请求路径 *.html 模 ...

  9. 已经包含了#include <atlcom.h> #include <comutil.h>还是报错

    在WTL工程的.h中 #include <atlbase.h>#include <atlcom.h>#include <atlcomcli.h>#include & ...

  10. Part 16 ng include directive in AngularJS

    ng-include directive is used to embed an HTML page into another HTML page. This technique is extreme ...

随机推荐

  1. Centos6.6 系统优化

    1:最小化安装 2:修改网卡 vim /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0HWADDR=52:54:00:0e:c2:c3TYPE ...

  2. Qt之滚动字幕

    简述 滚动字幕,也就是传说中的跑马灯效果. ​简单地理解就是:每隔一段时间(一般几百毫秒效果较佳)显示的文字进行变化(即滚动效果). 简述 实现 效果 源码 实现 利用定时器QTimer,在固定的时间 ...

  3. linux程序设计——个人总结

    linux程序设计--个人总结 到今天为止,<linux程序设计>学习基本完毕了.从五月下旬開始接触linux,学习安装Ubuntu14.04,六月份開始学习<linux程序设计&g ...

  4. js 压缩图片 H5

    原理 用 canvas的 toDataURI (type , int )  如果type参数的值为image/jpeg或image/webp,则第二个参数的值如果在0.0和1.0之间的话,会被看作是图 ...

  5. 用java实现螺旋数组

    接收数组的行数和列数,返回正序和倒序的螺旋数组 package cn.baokx; public class Test { public static void main(String[] args) ...

  6. FZOJ--2221-- RunningMan(水题)

    Problem 2221 RunningMan Accept: 4    Submit: 10 Time Limit: 1000 mSec    Memory Limit : 32768 KB Pro ...

  7. django 笔记9 分页知识整理

    感谢老男孩 自定义分页 XSS:攻击 默认字符串返回 {{page_str|safe}} 前端 from django.utils.safestring import mark_safe page_s ...

  8. DSU

    DSU stands for ‘decorate, sort, undecorate’ and refers to a pattern that is often useful for sorting ...

  9. C#篇(一)——字段与属性

    字段和属性有什么区别? class Student { private int age; public int Age { get { return age; } set { age = value; ...

  10. Spring控制反转容器的使用例子

    详细代码如下: spring-config.xml <?xml version="1.0" encoding="UTF-8"?> <beans ...