[解決済み] 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
注意 前回の回答は、ディレクティブではなく、サードパーティーのサービスを変更するためのものでした。
関連
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み] Angularでtransclude 'true'とtransclude 'element'を使用するタイミングは?
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] なぜJavaScriptでは!{}[true]がtrueに評価されるのですか?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] ECMAScriptとは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] AngularJSのエラーです。Cross Origin リクエストはプロトコルスキーム http, data, chrome-extension, https に対してのみサポートされています。
-
[解決済み] JavaScriptで、ある文字列が別の文字列の中に出現するすべてのインデックスを見つけるにはどうすればよいですか?
-
[解決済み] アサインの左側にJavascriptのオブジェクトブラケット表記({ ナビゲーション } =)があります。
-
[解決済み] 文字列が空白であるかどうかをチェックする
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] イテレータでmap()を使用する
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行