AngularJSは、DOMノード操作を使用してカスタムコンテンツを追加することなく、ユーザー定義のラベル属性をサポートしています。
前述の特性AngularJSの4：
1 MVC
2モジュラー
3命令
結合4双方向データ
次の意志は、以下のトピックについて説明します。
1命令をカスタマイズする方法
2カスタムコマンドを使用して
3カスタム構築された命令を使用して
命令をカスタマイズする方法：
アンギュラフレームモジュールは、その独自のモジュールを作成して来るようにしてくださいに基づいています。
var myAppModule = angular.module("myApp",[]);そして、このモジュールに基づいて、コマンドディレクティブを作成
myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
repalce:true
}
});これは、xingooは、そのメソッド関数に続いて、私たちのカスタムタグ名です。
、タグの使用を定義する属性、およびそのコンテンツファンクションキーの組み合わせ、のリターン。
そして、それはそれを定義するものを見てみましょう：
1制限：つまりAECMは、タグの使用は、4つの合計を定義
2テンプレート：テンプレート定義のラベル。文字列の定義からラベルを置き換えるために使用されています
3 repalce：交換をサポートするかどうか
4 transclude：組み込みサポートするかどうか
コマンドを使用する方法：
上記4つのラベル、すなわちAECMの使用。
属性プロパティ：プロパティはとして使用します
<div xingoo></div>E要素の要素：ラベルとして使用される要素
<xingoo></xingoo>Cクラスのカテゴリ：CSSスタイルとして使用します
<div class="xingoo"></div>Mのコメントは注意：使用されるように注意してください（このように、バージョン1.2使用不能に親和性が測定されました！）
<!-- directive:xingoo -->
<div></div>一般的に使用するための属性と要素として、お勧めします。
それは、プロパティの方法により、既存のHTMLタグに拡張属性を希望される場合。
カスタムラベルをしたい場合は、ラベルの形態です。
あなたが使用したいその方法は、ディレクティブの定義を制限するために対応する文字の内部で宣言する必要があります。
命令を使用して構築されました：
タグは他のタグ内にネストすることができますので、あなたが他の要素のラベルカスタムラベルに入れ子にすることにしたいので、次のものが必要です。
1 trueに設定transcludeプロパティを使用して。
ネストされた位置内に定義2 NG-transclude特性を、使用。
コードは以下の通りであります：
myAppModule.directive("test",function(){
return{
restrict:'AECM',
transclude:true,
template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
}
});
すべてのコード
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body>
<xingoo></xingoo>
<div xingoo></div>
<div class="xingoo"></div>
<!-- directive:xingoo -->
<div></div>
<hr>
<xingoo>3333</xingoo>
<hr>
<test>4444</test>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
repalce:true
}
});
myAppModule.directive("test",function(){
return{
restrict:'AECM',
transclude:true,
template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
}
});
</script>
</body>
</html>業績
ます。https：//my.oschina.net/u/204616/blog/545170で再現