ngInclude

1. - directive in module ng

获取、编译并引用一个外部HTML片段。

默认情况下，模板URL被强制为使用与应用文档相同的域名和协议。这是通过调用$sce.getTrustedResourceUrl 实现的。为了从其它的域名和协议载入模板，你可以采用 白名单化 或 包裹化 任一手段来作为可信任值。参考 Angular的 强上下文转义。

此外，浏览器的 同源策略 和 交叉源资源共享(CORS) 策略会进一步限制模板是否能成功载入。例如，ngInclude在所有浏览器上不能进行交叉域请求，一些浏览不能访问file://等。

指令信息

• 这个指令会创建新的作用域(scope)。
• 这个指令执行优先级为400.

用法

动画

enter - 动画用于新内容加入到浏览器时。

leave - 动画应用于现有内容去除时。

enter和 leave动画会并行发生。

-如果属性未设置，禁止滚动。-如果存在属性但没有值，允许滚动。-其它情况下只有表达式计算结果为真时才允许滚动。

事件

• $includeContentRequested

  每次请求ngInclude内容时触发。

  类型:

  emit

  目标:

  ngInclude定义所在的域

• $includeContentLoaded

  每次ngInclude内容载入时触发。

  类型:

  emit

  目标:

  当前ngInclude域

• $includeContentError

  当一个模板的HTTP请求得到错误响应(status < 200 || status > 299)时触发。

  类型:

  emit

  目标:

  ngInclude定义所在的域

示例

ng-controller="ExampleController">ng-model="template"ng-options="t.name for t in templates">value="">(blank)url of the template:{{template.url}}
class="slide-animate-container">class="slide-animate"ng-include="template.url">

angular.module('includeExample',['ngAnimate']).controller('ExampleController',['$scope',Function($scope){$scope.templates=[{name:'template1.html',url:'template1.html'},{name:'template2.html',url:'template2.html'}];$scope.template=$scope.templates[0];}]);

Contentof template1.html

Contentof template2.html

.slide-animate-container{position:relative;background:white;border:1pxsolid black;height:40px;overflow:hidden;}.slide-animate{padding:10px;}.slide-animate.ng-enter,.slide-animate.ng-leave{-webkit-transition:all cubic-bezier(0.250,0.460,0.450,0.940)0.5s;transition:all cubic-bezier(0.250,0.460,0.450,0.940)0.5s;position:absolute;top:0;left:0;right:0;bottom:0;display:block;padding:10px;}.slide-animate.ng-enter{top:-50px;}.slide-animate.ng-enter.ng-enter-active{top:0;}.slide-animate.ng-leave{top:0;}.slide-animate.ng-leave.ng-leave-active{top:50px;}

vartemplateSelect=element(by.model('template'));varincludeElem=element(by.css('[ng-include]'));it('should load template1.html',Function(){expect(includeElem.getText()).toMatch(/Content of template1.html/);});it('should load template2.html',Function(){if(browser.params.browser=='firefox'){// Firefox can't handle using selects// See https://github.com/angular/protractor/issues/480return;}templateSelect.click();templateSelect.all(by.css('option')).get(2).click();expect(includeElem.getText()).toMatch(/Content of template2.html/);});it('should change to blank',Function(){if(browser.params.browser=='firefox'){// Firefox can't handle using selectsreturn;}templateSelect.click();templateSelect.all(by.css('option')).get(0).click();expect(includeElem.isPresent()).toBe(false);});