js STUDIO

ngInclude

概要

外部のHTMLの断片を取得し、コンパイルしてその場所に取り込みます。

デフォルトでは、テンプレートのURLはアプリケーションのドキュメントと同じドメインとプロトコルに制限されます。 これは、$sce.getTrustedResourceUrlを呼び出すことで実行されます。 別のドメイン、プロトコルからテンプレートを読み込むには、それらのホワイトリスト化するか、信頼できるものとしてラップするかします。 詳細は、AngularのStrict Contextual Escapingを確認してください。

加えて、ブラウザの同一生成元ポリシーとCORS(Cross-Origin Resource Sharing)ポリシーは、 テンプレートが正常に読み込まれたかを、より制限するかもしれません。 例えば、全てのブラウザでのクロスドメインリクエストと、いくつかのブラウザでのfile://アクセスは、 ngIncludeでは動作しません。

使用方法

このディレクティブは、カスタム要素として使用することができますが、IEの制限に注意してください。 

<ng-include
       src="{string}"
       [onload="{string}"]
       [autoscroll="{string}"]>
</ng-include>

<要素 ng-include="{string}"
     [onload="{string}"]
     [autoscroll="{string}"]>
   ...
</要素>

<要素 class="ng-include: {string}; [onload: {string};] [autoscroll: {string};]">
   ...
</要素>

ディレクティブ情報

  • このディレクティブは新しいスコープを作成します。

アニメーション

enter
新しいコンテンツがブラウザに読み込まれる際に使用されるアニメーションです。
leave
既存のコンテンツが無くなる際に使用されるアニメーションです。

enterとleaveアニメーションは同時に発生します。

Click here to learn more about the steps involved in the animation.

引数

引数 説明
ngInclude | src

型：string

URLとして評価するAngular式を指定します。 もし、決まった文字列を指定するのであれば、クォートで囲ってください。 例).src="'my-partial-template.html'"

onload (optional)

型：string

新しい断片が読み込まれた際に評価される式を指定します。

autoscroll(optional)

型：string

コンテンツが読み込まれた後にngIncludeが$anchorScrollを呼び出して、 ビューポートをスクロールするべきかを指定します。

  • もし、属性が設定されなければ、スクロールは無効になります。
  • もし、値無しで属性が指定されると、スクロールは有効になります。
  • もし、式、値が属性に指定されていれば、trueと評価された場合のみ、スクロルーが有効になります。

イベント

イベント 説明
$includeContentLoaded

型：emit
ターゲット：現在のngIncludeスコープ

ngIncludeのコンテンツがリロードされる度にトリガされます。

$includeContentRequested

型：emit
ターゲット：

ngIncludeのコンテンツがリクエストされる度にトリガされます。

デモ 

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <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="example-animate-container">
        <div class="include-example" ng-include="template.url"></div>
      </div>
    </div>
  </body>
</html>

Content of template1.html

Content of template2.html

.example-animate-container {
  position:relative;
  background:white;
  border:1px solid black;
  height:40px;
  overflow:hidden;
}

.example-animate-container > div {
  padding:10px;
}

.include-example.ng-enter, .include-example.ng-leave {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-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;
}

.include-example.ng-enter {
  top:-50px;
}
.include-example.ng-enter.ng-enter-active {
  top:0;
}

.include-example.ng-leave {
  top:0;
}
.include-example.ng-leave.ng-leave-active {
  top:50px;
}

function Ctrl($scope) {
  $scope.templates =
    [ { name: 'template1.html', url: 'template1.html'}
    , { name: 'template2.html', url: 'template2.html'} ];
  $scope.template = $scope.templates[0];
}

it('should load template1.html', function() {
 expect(element('.doc-example-live [ng-include]').text()).
   toMatch(/Content of template1.html/);
});
it('should load template2.html', function() {
 select('template').option('1');
 expect(element('.doc-example-live [ng-include]').text()).
   toMatch(/Content of template2.html/);
});
it('should change to blank', function() {
 select('template').option('');
 expect(element('.doc-example-live [ng-include]')).toBe(undefined);
});

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。