©
This document uses PHP Chinese website manual Release
获取、编译并引用一个外部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>enter - 动画用于新内容加入到浏览器时。
leave - 动画应用于现有内容去除时。
enter和 leave动画会并行发生。
点击这里 了解更多关于涉及动画的步骤。| 参数 | 类型 | 详述 |
|---|---|---|
| ngInclude | src | string | 计算结果为URL的angular表达式。 如果来源是一个字符串常量，请确保使用单引号包裹它，例如 |
| onload
(可选)
|
string | 当新的部分被载入时的计算表达式。 |
| autoscroll
(可选)
|
string |
是否 |
每次请求ngInclude内容时触发。
每次ngInclude内容载入时触发。
当一个模板的HTTP请求得到错误响应(status < 200 || status > 299)时触发。
<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>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];
}]);Content of template1.htmlContent of template2.html.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;}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);});