[解決済み] AngularJsのディレクティブを拡張する

質問

サードパーティのディレクティブを少し修正したいのですが (具体的には Angular UI Bootstrap ). 私は、単に pane ディレクティブのスコープに追加したいだけです。

angular.module('ui.bootstrap.tabs', [])
.controller('TabsController', ['$scope', '$element', function($scope, $element) {
  // various methods
}])
.directive('tabs', function() {
  return {
    // etc...
  };
})
.directive('pane', ['$parse', function($parse) {
  return {
    require: '^tabs',
    restrict: 'EA',
    transclude: true,
    scope:{
      heading:'@',
      disabled:'@' // <- ADDED SCOPE PROPERTY HERE
    },
    link: function(scope, element, attrs, tabsCtrl) {
      // link function
    },
    templateUrl: 'template/tabs/pane.html',
    replace: true
  };
}]);

しかし、Angular-BootstrapをBowerで最新に保ちたいとも思っています。 を実行するとすぐに bower update を実行したら、私の変更を上書きします。

では、このディレクティブをこのbowerコンポーネントとは別に拡張するにはどうすればいいのでしょうか？

どのように解決するのですか？

この問題を解決する最も簡単な方法は、サードパーティーのディレクティブと同じ名前のディレクティブをアプリに作成することでしょう。 両方のディレクティブが実行され、その実行順序は priority プロパティを使って実行順序を指定することができます (優先順位の高いものが最初に実行されます)。

二つのディレクティブはスコープを共有し、自分のディレクティブの link メソッドを使って、第三者のディレクティブのスコープにアクセスし、 変更することができます。

オプション2です。 任意の名前のディレクティブをそれと同じ要素に置くだけで、 サードパーティディレクティブのスコープにアクセスすることもできます (どちらのディレクティブも isolate scope を使っていないと仮定しています)。 要素上の非アイソレートスコープディレクティブは、すべてスコープを共有します。

さらに読む https://github.com/angular/angular.js/wiki/Dev-Guide%3A-Understanding-Directives

注意 前回の回答は、ディレクティブではなく、サードパーティーのサービスを変更するためのものでした。