2016-07-05 9 views
2

私は角のライブラリに取り組んでDecoratorパターンを使用してディレクティブを拡張する方法を探しています:angleのデコレータパターンでディレクティブのリンク関数を拡張するにはどうすればよいですか?

angular.module('myApp', []).decorator('originaldirectiveDirective', [ 
    '$delegate', function($delegate) { 

    var originalLinkFn; 
    originalLinkFn = $delegate[0].link; 

    return $delegate; 
    } 
]); 

このパターンを使用して、元のディレクティブを強化するための最良の方法だろうか? (使用例:コードを直接変更することなく、ディレクティブ上に追加のウォッチまたは余分なイベントリスナーを追加する)

答えて

4

ディレクティブのcontrollerを非常に簡単に変更または拡張できます。それがlinkの場合(あなたの例のように)それはそれほど難しいことではありません。 config段階のディレクティブのcompile機能を変更するだけです。例えば

HTMLテンプレート

<body> 
    <my-directive></my-directive> 
</body> 

はJavaScript

angular.module('app', []) 

    .config(function($provide) { 
    $provide.decorator('myDirectiveDirective', function($delegate) { 
     var directive = $delegate[0]; 

     directive.compile = function() { 
     return function(scope) { 
      directive.link.apply(this, arguments); 
      scope.$watch('value', function() { 
      console.log('value', scope.value); 
      }); 
     }; 
     }; 

     return $delegate; 
    }); 
    }) 

    .directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     link: function(scope) { 
     scope.value = 0; 
     }, 
     template: '<input type="number" ng-model="value">' 
    }; 
    }); 

今、あなたはそれが変更されたこれまでのときvalueをログに記録するmyDirectiveを飾っています。

ここをクリックしてhttps://plnkr.co/edit/mDYxKj

+0

教えてくれてありがとうございます。 'config'段階で装飾を行う特別な理由はありますか? –

+0

あなたがconfigでそれをやる前に、それ以上はなかったようです。 –

+0

よろしくお願いします.Mikko –

関連する問題