Aをdirective
使用すると、Webコンポーネントを構築するための宣言的な方法でHTMLボキャブラリを拡張できます。ng-app
属性は、ディレクティブです、そうですng-controller
と、すべてのng- prefixed attributes
。ディレクティブは、することができattributes
、tags
偶数かclass
names
、comments
。
ディレクティブが生まれる方法(compilation
およびinstantiation
)
コンパイル:レンダリングする前にDOM compile
に対して関数を使用しmanipulate
、link
関数(リンクを処理します)を返します。これは、instances
このディレクティブのすべてと共有する必要のあるメソッドを配置する場所でもあります。
リンク:link
関数を使用して、特定のDOM要素(テンプレートから複製されたもの)のすべてのリスナーを登録し、ページへのバインディングを設定します。
compile()
関数に設定されている場合、それらは一度だけ設定されていたはずです(多くの場合、これが必要です)。設定した場合link()
の機能、それらはHTML要素がデータにバインドされるたびに設定される
オブジェクトを。
<div ng-repeat="i in [0,1,2]">
<simple>
<div>Inner content</div>
</simple>
</div>
app.directive("simple", function(){
return {
restrict: "EA",
transclude:true,
template:"<div>{{label}}<div ng-transclude></div></div>",
compile: function(element, attributes){
return {
pre: function(scope, element, attributes, controller, transcludeFn){
},
post: function(scope, element, attributes, controller, transcludeFn){
}
}
},
controller: function($scope){
}
};
});
Compile
関数が戻るpre
とpost
リンク機能。リンク前機能には、インスタンステンプレートとのスコープcontroller
がありますが、テンプレートはスコープにバインドされておらず、内容が変換されていません。
Post
link関数は、post linkが最後に実行される関数です。これで、、およびtransclusion
が完成the template is linked to a scope
しましたview will update with data bound values after the next digest cycle
。link
オプションでは、設定にちょうど近道であるpost-link
機能を。
コントローラー:ディレクティブコントローラーは、別のディレクティブリンク/コンパイルフェーズに渡すことができます。これは、指令間の通信で使用する手段として他の指令に注入できます。
必要なディレクティブの名前を指定する必要があります。同じ要素またはその親にバインドする必要があります。名前の前に次を付けることができます。
? – Will not raise any error if a mentioned directive does not exist.
^ – Will look for the directive on parent elements, if not available on the same element.
角括弧[‘directive1′, ‘directive2′, ‘directive3′]
を使用して、複数のディレクティブコントローラーを要求します。
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $element) {
});
app.directive('parentDirective', function() {
return {
restrict: 'E',
template: '<child-directive></child-directive>',
controller: function($scope, $element){
this.variable = "Hi Vinothbabu"
}
}
});
app.directive('childDirective', function() {
return {
restrict: 'E',
template: '<h1>I am child</h1>',
replace: true,
require: '^parentDirective',
link: function($scope, $element, attr, parentDirectCtrl){
//you now have access to parentDirectCtrl.variable
}
}
});