最近、Armin Ronacherの記事を1つ読んだ後、ディレクティブを継承して、
すぐに彼の
Angular Lightライブラリ（aLight）でこれを実現しました。
一般に、すべての継承は、ディレクティブを将来再定義できるメソッドに分割することになります。
al-showに基づいた
al-show-slowの例は次のとおりです。要素はゆっくりと表示され、非表示になります。
alight.directives.al.showSlow = function(element, name, scope, env) { var dir = alight.directives.al.show(element, name, scope, env); // dir.showDom = function() { // "show" $(element).fadeIn(1000); } dir.hideDom = function() { // "hide" $(element).fadeOut(1000); } return dir; }
アルショーの継承の例もう1つの
例は、 al-valueに基づく
al-value-delayで、データは遅延（繰り返しなし）でモデルに分類されます。
ここでは多重継承も可能ですが、これまでのところ必要ありませんでした。
いくつかの便利な方法を次に示します。1） 「切り離された」DOM、つまり 文書にないもの：
tpl = $('<div al-init="i=0" al-click="i+=1">{{i}}</div>') // DOM alight.applyBindings(null, tpl[0]) // $('body').append(tpl) // body
2）ディレクティブの名前を変更する機能、Angular.jsでの方法はわかりませんが、aLightでは簡単です：
alight.directives.al.myKeypress = alight.directives.al.keypress
3） Angular.jsでは、$ダイジェストが現在処理中である場合でも、$ダイジェスト/ $が適用された直後にコードを呼び出す方法について時々質問がありました。 aLightには、$ダイジェストの代わりに、$スキャン関数があり、次のように処理した後、コードを呼び出すことができます。
scope.$scan(function(){
4） DOMでの静的バインディング、aLightでは、DOMで値をバインドする2つの方法があります。
<a href="{{first}}">{{first}}</a> <a href="{{=second}}">{{=second}}</a>
違いは、2番目のケースでは変数の変更の追跡がないことです。これは、通常の1回限りのレンダリングとして便利です。
5）ディレクティブのプレフィックス。 各ディレクティブは、al-if、bo-if、ui-ifなどの独自の「セクション」にあります。 これらのセクションを使用すると、たとえばknockout.jsのようにディレクティブの存在を監視できます。たとえば、
<div al-ifn="visible"></div>
次に、aLightはそのようなディレクティブがないというエラーを出します。
また、habr-usersのコメントを考慮し、aLight APIを
アンダースコアから
camelcaseに転送し 、al-keydown、al-mousedown、al-mousemoveなどのディレクティブを追加しました。 標準ディレクティブの完全なリストは、
ここにあります。今日の指令からさらにいくつかのポイント：
al-keydown、al-mousemoveなどの場合、
$イベントは式で直接使用できます。
<input type="text" al-keydown="key = $event.keyCode" />
al-focusedディレクティブは、双方向バインディングを行います-変数focused = trueを設定すると、要素にフォーカスが設定され、要素にフォーカスが表示されると、変数がtrueに設定されます（フォーカスが同じ方法でなくなると）。
<input type="text" al-focused="focused" />
ここの例では、ページの読み込み時または他の瞬間にフォーカスを設定すると便利ですが、何かが機能しない場合は、それを継承して変更できます。
それは基本的にそれです。 コメントや提案を歓迎します。