ngTransclude

http://docs.angularjs.org/api/ng.directive:ngTransclude

概要
使用方法
デモ

概要

トランスクルージョンを使用する、最も近い親ディレクティブのトランスクルードDOMの挿入点をマークするディレクティブです。

トランスクルードコンテンツが挿入される前に、このディレクティブ上に置かれている要素の既存のコンテンツは削除されます。

使用方法

<要素 ng-transclude>
   ...
</要素>

<要素 class="ng-transclude">
   ...
</要素>

デモ

<!doctype html>
<html ng-app="transclude">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <input ng-model="title"><br>
      <textarea ng-model="text"></textarea> <br/>
      <pane title="{{title}}">{{text}}</pane>
    </div>
  </body>
</html>

function Ctrl($scope) {
  $scope.title = 'Lorem Ipsum';
  $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<div style="border: 1px solid black;">' +
                  '<div style="background-color: gray">{{title}}</div>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
});

it('should have transcluded', function() {
  input('title').enter('TITLE');
  input('text').enter('TEXT');
  expect(binding('title')).toEqual('TITLE');
  expect(binding('text')).toEqual('TEXT');
});

<!doctype html>
<html ng-app="transclude">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.title = 'Lorem Ipsum';
  $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...';
}

angular.module('transclude', [])
 .directive('pane', function(){
    return {
      restrict: 'E',
      transclude: true,
      scope: { title:'@' },
      template: '<div style="border: 1px solid black;">' +
                  '<div style="background-color: gray">{{title}}</div>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
});
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <input ng-model="title"><br>
      <textarea ng-model="text"></textarea> <br/>
      <pane title="{{title}}">{{text}}</pane>
    </div>
  </body>
</html>

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

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