目录搜索

文字

AngularJS: API: ng/directive/ngInclude

ngInclude

- directive in module ng

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

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

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

指令信息

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

用法

作为元素使用: (这个指令能用于自定义元素，但要注意IE限制)。
```
<ng-include
  src=""
  [onload=""]
  [autoscroll=""]>
...
</ng-include>
```

作为属性使用:

<ANY
  ng-include=""
  [onload=""]
  [autoscroll=""]>
...
</ANY>

作为CSS类使用:

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

动画

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

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

enter和 leave动画会并行发生。

点击这里了解更多关于涉及动画的步骤。

参数

参数类型详述

ngInclude | src

string

参数	类型	详述
ngInclude \| src	string	计算结果为URL的angular表达式。如果来源是一个字符串常量，请确保使用单引号包裹它，例如 `src="'myPartialTemplate.html'"`.
onload (可选)	string	当新的部分被载入时的计算表达式。
autoscroll (可选)	string	是否 `ngInclude` 可以调用 $anchorScroll 来滚动可视区域，在内容被加载后。 `- 如果属性未设置，禁止滚动。 - 如果存在属性但没有值，允许滚动。 - 其它情况下只有表达式计算结果为真时才允许滚动。`

计算结果为URL的angular表达式。如果来源是一个字符串常量，请确保使用单引号包裹它，例如 src="'myPartialTemplate.html'".

onload

(可选)

string

当新的部分被载入时的计算表达式。

autoscroll

(可选)

string

是否 ngInclude 可以调用 $anchorScroll 来滚动可视区域，在内容被加载后。

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

事件

$includeContentRequested

每次请求ngInclude内容时触发。

类型:

emit

目标:

ngInclude定义所在的域
$includeContentLoaded

每次ngInclude内容载入时触发。

类型:

emit

目标:

当前ngInclude域
$includeContentError

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

类型:

emit

目标:

ngInclude定义所在的域

示例

index.html

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

script.js

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];
  }]);

template1.html

Content of template1.html

template2.html

Content of template2.html

animations.css

.slide-animate-container {
  position:relative;
  background:white;
  border:1px solid 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;}

protractor.js

var templateSelect = element(by.model('template'));var includeElem = 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/480
    return;
  }
  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 selects
    return;
  }
  templateSelect.click();
  templateSelect.all(by.css('option')).get(0).click();
  expect(includeElem.isPresent()).toBe(false);});

AngularJS: API: ng/directive/ngInclude

ngInclude

指令信息

用法

动画

参数

事件

$includeContentRequested

类型:

目标:

$includeContentLoaded

类型:

目标:

$includeContentError

类型:

目标:

示例