$compile
概要
HTML文字列の断片、またはテンプレート内のDOMをコンパイルし、 スコープへのリンクとテンプレートで一緒に使用することが出来るテンプレート関数を生成します。
コンパイルとはDOMツリーを辿って、ディレクティブのためにDOM要素をつなぎ合わせる過程の事を示します。
注意: このドキュメントは全てのディレクティブオプションの詳細で専門的なリファレンスになります。 一般的なサンプル付きの初学者向きの内容を参照したければ、ディレクティブのガイドを参照してください。
ディレクティブAPIの詳細
ディレクティブのための多くの異なるオプションが存在します。
異なる部分とは、ファクトリー関数の戻り値に存在します。 ディレクティブのプロパティが定義された"ディレクティブ定義オブジェクト(Directive Definition Object)"(下記を参照)、 またはpostLink関数(他の全てのプロパティはデフォルト値)のどちらかを返すことが可能です。
ベストプラクティス: "ディレクティブ定義オブジェクト"形式を使用することをお勧めします。
下記は、ディレクティブ定義オブジェクトを使用した定義例になります。
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
priority: 0,
template: '<div></div>',
// or
// function(tElement, tAttrs) { ... },
// or
// templateUrl: 'directive.html',
// or
// function(tElement, tAttrs) { ... },
replace: false,
transclude: false,
restrict: 'A',
scope: false,
controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
require: 'siblingDirectiveName',
// or
// ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
// or
// return function postLink( ... ) { ... }
},
// or
// link: {
// pre: function preLink(scope, iElement, iAttrs, controller) { ... },
// post: function postLink(scope, iElement, iAttrs, controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
};
return directiveDefinitionObject;
});
注意: 指定の無いオプションにはデフォルト値が使用されます。この後の内容でデフォルト値について確認しておいてください。
デフォルト値が使用されるため、上記の例は次のようにシンプルにすることが可能です。
var myModule = angular.module(...);
myModule.directive('directiveName', function factory(injectables) {
var directiveDefinitionObject = {
link: function postLink(scope, iElement, iAttrs) { ... }
};
return directiveDefinitionObject;
// or
// return function postLink(scope, iElement, iAttrs) { ... }
});
ディレクティブ定義オブジェクト(Directive Definition Object)
ディレクティブ定義オブジェクトは、コンパイルに対して指示をする内容を提供します。 その属性は、下記のとおりになります。
属性(Attributes)
属性(Attributes) オブジェクト - link()またはcompile()関数内で引数として渡されます。 これには様々な用途があります。
正規化された属性名へのアクセスです。 'ngBind'のようなディレクティブは、'ng:bind'、data-ng-bind、'x-ng-bind'のような多くの方法で表現することが可能です。 属性オブジェクトは、正規化された属性へのアクセスを可能にしてくれます。
function linkingFn(scope, elm, attrs, ctrl) {
// 属性の値を取得
console.log(attrs.ngModel);
// 属性を変更
attrs.$set('ngModel', 'new value');
// 補完された属性の変更を監視
attrs.$observe('ngModel', function(value) {
console.log('ngModel has changed value to ' + value);
});
}
下記は$compileProviderを使用した例になります。
注意: 一般的にディレクティブはmodule.directiveを使用して登録されます。 下記の例は、$compileの動作方法を説明するためのものです。
<!doctype html>
<html ng-app="compile">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br>
<div compile="html"></div>
</div>
</body>
</html>
angular.module('compile', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
})
});
function Ctrl($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello {{name}}';
}
it('should auto compile', function() {
expect(element('div[compile]').text()).toBe('Hello Angular');
input('html').enter('{{name}}!');
expect(element('div[compile]').text()).toBe('Angular!');
});
<!doctype html>
<html ng-app="compile">
<head>
<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script>angular.module('compile', [], function($compileProvider) {
// configure new 'compile' directive by passing a directive
// factory function. The factory function injects the '$compile'
$compileProvider.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
})
});
function Ctrl($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello {{name}}';
}
</script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br>
<div compile="html"></div>
</div>
</body>
</html>
使用方法
$compile(element, transclude, maxPriority);
| 引数 | 説明 |
|---|---|
| element |
型： template関数でコンパイルされる要素またはHTML文字列です。 |
| transclude |
型： ディレクティブで利用可能な関数です。 |
| maxPriority |
型： 与えられたpriority(優先度)より低いディレクティブのみを適用 (root要素(複数可)にのみ影響し、子要素には影響しません) |
| 戻り値 | 説明 |
|
型： スコープにテンプレート(DOM要素/ツリー)を紐付けるのに使用されるlink関数です。
リンク関数の呼び出すと、テンプレートの要素を返します。 これは渡された元の要素、またはcloneAttachFnが提供されていれば複製された要素のどちらかになります。 リンクされた後は、ビューは通常Angularによって自動的に実行される$digestが呼ばれるまで、更新されることはありません。
|
© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.
このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。