目录搜索
AngularJS API Referenceautoauto/serviceauto/service/$injectorauto/service/$providengng/directiveng/directive/ang/directive/formng/directive/inputng/directive/input[checkbox]ng/directive/input[date]ng/directive/input[dateTimeLocal]ng/directive/input[email]ng/directive/input[month]ng/directive/input[number]ng/directive/input[radio]ng/directive/input[text]ng/directive/input[time]ng/directive/input[url]ng/directive/input[week]ng/directive/ngAppng/directive/ngBindng/directive/ngBindHtmlng/directive/ngBindTemplateng/directive/ngBlurng/directive/ngChangeng/directive/ngCheckedng/directive/ngClassng/directive/ngClassEvenng/directive/ngClassOddng/directive/ngClickng/directive/ngCloakng/directive/ngControllerng/directive/ngCopyng/directive/ngCspng/directive/ngCutng/directive/ngDblclickng/directive/ngDisabledng/directive/ngFocusng/directive/ngFormng/directive/ngHideng/directive/ngHrefng/directive/ngIfng/directive/ngIncludeng/directive/ngInitng/directive/ngKeydownng/directive/ngKeypressng/directive/ngKeyupng/directive/ngListng/directive/ngModelng/directive/ngModelOptionsng/directive/ngMousedownng/directive/ngMouseenterng/directive/ngMouseleaveng/directive/ngMousemoveng/directive/ngMouseoverng/directive/ngMouseupng/directive/ngNonBindableng/directive/ngOpenng/directive/ngPasteng/directive/ngPluralizeng/directive/ngReadonlyng/directive/ngRepeatng/directive/ngSelectedng/directive/ngShowng/directive/ngSrcng/directive/ngSrcsetng/directive/ngStyleng/directive/ngSubmitng/directive/ngSwitchng/directive/ngTranscludeng/directive/ngValueng/directive/scriptng/directive/selectng/directive/textareang/filterng/filter/currencyng/filter/dateng/filter/filterng/filter/jsonng/filter/limitTong/filter/lowercaseng/filter/numberng/filter/orderByng/filter/uppercaseng/functionng/function/angular.bindng/function/angular.bootstrapng/function/angular.copyng/function/angular.elementng/function/angular.equalsng/function/angular.extendng/function/angular.forEachng/function/angular.fromJsonng/function/angular.identityng/function/angular.injectorng/function/angular.isArrayng/function/angular.isDateng/function/angular.isDefinedng/function/angular.isElementng/function/angular.isFunctionng/function/angular.isNumberng/function/angular.isObjectng/function/angular.isStringng/function/angular.isUndefinedng/function/angular.lowercaseng/function/angular.moduleng/function/angular.noopng/function/angular.toJsonng/function/angular.uppercaseng/objectng/object/angular.versionng/providerng/provider/$animateProviderng/provider/$compileProviderng/provider/$controllerProviderng/provider/$filterProviderng/provider/$httpProviderng/provider/$interpolateProviderng/provider/$locationProviderng/provider/$logProviderng/provider/$parseProviderng/provider/$rootScopeProviderng/provider/$sceDelegateProviderng/provider/$sceProviderng/serviceng/service/$anchorScrollng/service/$animateng/service/$cacheFactoryng/service/$compileng/service/$controllerng/service/$documentng/service/$exceptionHandlerng/service/$filterng/service/$httpng/service/$httpBackendng/service/$interpolateng/service/$intervalng/service/$localeng/service/$locationng/service/$logng/service/$parseng/service/$qng/service/$rootElementng/service/$rootScopeng/service/$sceng/service/$sceDelegateng/service/$templateCacheng/service/$timeoutng/service/$windowng/typeng/type/$cacheFactory.Cacheng/type/$compile.directive.Attributesng/type/$rootScope.Scopeng/type/angular.Moduleng/type/form.FormControllerng/type/ngModel.NgModelControllerngAnimatengAnimate/providerngAnimate/provider/$animateProviderngAnimate/servicengAnimate/service/$animatengCookiesngCookies/servicengCookies/service/$cookiesngCookies/service/$cookieStorengMessagesngMessages/directivengMessages/directive/ngMessagengMessages/directive/ngMessagesngMockngMock/functionngMock/function/angular.mock.dumpngMock/function/angular.mock.injectngMock/function/angular.mock.modulengMock/objectngMock/object/angular.mockngMock/providerngMock/provider/$exceptionHandlerProviderngMock/servicengMock/service/$exceptionHandlerngMock/service/$httpBackendngMock/service/$intervalngMock/service/$logngMock/service/$timeoutngMock/typengMock/type/angular.mock.TzDatengMockE2EngMockE2E/servicengMockE2E/service/$httpBackendngResourcengResource/servicengResource/service/$resourcengRoutengRoute/directivengRoute/directive/ngViewngRoute/providerngRoute/provider/$routeProviderngRoute/servicengRoute/service/$routengRoute/service/$routeParamsngSanitizengSanitize/filterngSanitize/filter/linkyngSanitize/servicengSanitize/service/$sanitizengTouchngTouch/directivengTouch/directive/ngClickngTouch/directive/ngSwipeLeftngTouch/directive/ngSwipeRightngTouch/servicengTouch/service/$swipe
文字

AngularJS: API: ng/directive/ngInclude

ngInclude

  1. - 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

计算结果为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);});
上一篇:下一篇: