2017-03-07 5 views
2

角度デコレーターガイド(https://docs.angularjs.org/guide/decorators)のテンプレートに従ってみると、私はディレクティブを作成してそれを飾ろうとしました。私の装飾されたディレクティブは、AngularJSの元のメソッドをオーバーライドしないのはなぜですか?

このディレクティブは、現在の日付/時刻を表示することになっています。 link関数を変更する(役に立たない)デコレータを追加し、日付/時刻の代わりに "today"という文字列を表示します。

何らかの理由で、私のオーバーライドされたlink関数が呼び出されないようです。代わりに元の画像が呼び出されます。どうしてこれなの?

コードはhttp://plnkr.co/edit/uvtBiN5vNSjk5I89t99C?p=preview(以下)にされています

angular.module('app', []); 

angular.module('app').directive('myElement', function(){ 
    return { 
    template: 'Today is {{ date }}', 
    link: function(scope, element, attrs){ 
     console.log('original link called') 
     scope.date = new Date(); 
    } 
    } 
}) 

angular.module('app').decorator('myElementDirective', function($delegate){ 

    $delegate[0].link = function(scope){ 
    console.log('calling delegate link') 
    scope.date = "today" 
    } 
    return $delegate; 
}) 

答えて

3

、コンパイル機能も同様に交換する必要があります。

angular.module('app').decorator('myElementDirective', function($delegate){ 

    $delegate[0].link = function(scope){ 
    console.log('calling delegate link') 
    scope.date = "today" 
    } 
    //------------------------------------ 
    //REPLACE compile function 
    $delegate[0].compile = function() { 
    return $delegate[0].link; 
    }; 
    //------------------------------------ 
    return $delegate; 
}) 

ディレクティブ定義オブジェクト(DDO)はコンパイル機能を省略した場合、$compileProvider.directive()登録方法は、リンク機能への参照を返す1を加算します。コンパイル関数は、新しいリンク関数への参照を返すように更新する必要があります。

$compile serviceは、DDOのlinkプロパティを無視します。 compileプロパティのみを使用します。

2

リンク機能は、AngularJSでちょうど糖衣構文です。これを使用すると、AngularJSはそのリンク関数を使用してコンパイル関数を生成します。しかし、それが完了すると、リンク機能を置き換えることは効果がありません。

代わりに、新しいリンク機能を返す、独自でコンパイル機能を置き換える必要があります。リンク機能を交換する場合

angular.module('app').decorator('myElementDirective', function($delegate){ 
    var originalLink = $delegate[0].link; 

    $delegate[0].compile = function() { 
     return function(scope, element, attrs) { 
     originalLink.apply($delegate[0], arguments); 
     scope.date = "today"; 
     }; 
    }; 

    return $delegate; 
}) 
関連する問題