转自：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. HDU-4296 Buildings 贪心 从相邻元素的相对位置开始考虑

    题目链接:https://cn.vjudge.net/problem/HDU-4296 题意 有很多板子,每一个板子有重量(w)和承重(s)能力 现规定一块板子的PDV值为其上所有板子的重量和减去这个 ...

  2. POJ-2253 Frogger dijsktra查找间隔最小的路径

    题目链接:https://cn.vjudge.net/problem/POJ-2253 题意 一只Forg需要从节点1走到节点n 现要找一条各个间隔最小的路径 问间隔最小是多少 思路 用dijsktr ...

  3. python字典对象的update()方法

    使用字典对象的update()方法,如A.update(B),将B字典的键值对一次性全部添加到A字典对象,当A字典为空时,相当于深复制,非常方便.如果两个字典中存在相同的键,则进行值的更新. A={} ...

  4. Java基础学习总结（45）——JAVA单元测试工具比较

    1.简介 jtest是parasoft公司推出的一款针对java语言的自动化白盒测试工具,它通过自动实现java的单元测试和代码标准校验,来提高代码的可靠性.Jtest先分析每个java类,然后自动生 ...

  5. 【转载】Failed to load class "org.slf4j.impl.StaticLoggerBinder".问题解决

    在进行hibernate配置好后运行测试类的时候出现: SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder" ...

  6. securefx连接linux后文件夹中文乱码问题解决

    首先在选项中设置字符编码为UTF-8 然后在全局选项中找到Securefx的配置文件 进入到该目录中,选择“Sessions”: 在“Sessions”中找到链接地址的ini文件,并用文本编辑器打开: ...

  7. linux 下同步异步，堵塞非堵塞的一些想法

    补充: 发现一个更好的解释样例:同步是一件事我们从头到尾尾随着完毕.异步是别人完毕我们仅仅看结果. 堵塞是完毕一件事的过程中可能会遇到一些情况让我们等待(挂起).非堵塞就是发生这些情况时我们跨过. 比 ...

  8. 9、包、访问控制、import、static、static代码块、final、抽象类、接口、instanceof、多态

    1.包 三级命名:公司的尾缀(com).公司名字(baidu).业务(Sale) java.lang:默认包:String.Math,Object,System java.util:工具包 java. ...

  9. Python库之pyudev (一)

    库pyudev是libudev的python封装,libudev提拱了对本地设备的列举与查询API. 1．安装 pip install pyudev 2. 使用 2.1 开始 导入pyudev,验证库 ...

  10. caffe 训练測试自己的数据集

    简单记录一下自己使用caffe的过程和遇到的一些问题. 下载caffe以及安装不具体叙述了. 可參照 http://caffe.berkeleyvision.org/installation.html ...