转自：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. chrome默认打开隐身模式

    chrome图标右键属性,在“目标”后添加参数“ --incognito”(注意是双短划线,不包括双引号,双短划线前加一空格)就可以直接以隐身模式启动chrome了

  2. [MST] Loading Data from the Server using lifecycle hook

    Let's stop hardcoding our initial state and fetch it from the server instead. In this lesson you wil ...

  3. 微信iOS SDK文档总结

    至今共19个类.分3大类. (1)请求与响应类:微信终端和第三方程序:第三方程序和微信server. BaseReq:全部请求类的基类. GetMessageFromWXReq:微信终端向第三方程序请 ...

  4. Swift中NSDictionaryOfVariableBindings的替代方案

    有日子没写东西了,抽点时间练练笔头子,业精于勤荒于嬉~ 近期从OC转到了Swift2,因为Swift一直没有正经学正经用,所以对这门语言的理解基本算是个球...不得不感慨苹果的动作之快.Swift还没 ...

  5. 《从零開始学Swift》学习笔记（Day 51）——扩展构造函数

    创文章.欢迎转载.转载请注明:关东升的博客 扩展类型的时候,也能够加入新的构造函数.值类型与引用类型扩展有所差别.值类型包含了除类以外的其它类型.主要是枚举类型和结构体类型. 值类型扩展构造函数 扩展 ...

  6. 转--配置linux下dircolors,ls命令和mac下iTerm2的颜色,让终端(iTerm2或Terminal)也色彩缤纷

    http://blog.bbkanba.com/%E9%85%8D%E7%BD%AElinux%E4%B8%8Bdircolorsls%E5%91%BD%E4%BB%A4%E5%92%8Cmac%E4 ...

  7. hibernate动态表名映射--仅仅有想不到，没有做不到

    近期的一个项目有一个需求,有N个考核单位,要对每一个考核单位生成一张考核情况表.这样做的目的是横切数据库,这这个需求的实现中,我的组员遇到了一个技术问题,我将我的解决的方法和整个思考过程与大家分享, ...

  8. 线程1—Thread

    随便选择两个城市作为预选旅游目标.实现两个独立的线程分别显示10次城市名,每次显示后休眠一段随机时间(1000ms以内),哪个先显示完毕,就决定去哪个城市.分别用Runnable接口和Thread类实 ...

  9. Andoid 更好的Android多线程下载框架

    概述 为什么是更好的Android多线程下载框架呢,原因你懂的,广告法嘛! 本篇我们我们就来聊聊多线程下载框架,先聊聊我们框架的特点: 多线程 多任务 断点续传 支持大文件 可以自定义下载数据库 高度 ...

  10. jsLittle源码封装对象合并

    JSLi.extend = JSLi.fn.extend = function () { var options, name, src, copy, target = arguments[0],i = ...