4

さまざまな Angular UI ディレクティブが呼び出されたときに、アクティブなクラスを要素に追加したいと考えています。たとえば、ポップオーバーを呼び出すと、要素 (この場合はボタン) を強調表示したいと思います。式で ng-click を追加できることはわかっていますが、より堅牢なソリューションが必要です。

ディレクティブを変更する方法がわからないので、ターゲット要素を取得してクラスを切り替えることができます。私はフィドルを作成しました。誰かがこれを手伝ってくれることを望んでいました。

助けてくれてありがとう、ありがとう。

4

1 に答える 1

7

Angular は、ui-bootstrap と同じ名前のディレクティブを定義することを制限しません。これは、それらをオーバーライドするという意味ではありません (ただし、オーバーライドすることはできます)。単に追加的に適用するだけです。元の機能を壊さない限り、次のようなことができます。

app.directive("popover", function () {
  return {
    restrict: 'EA',
    priority: -1000, // Run last
    link: function (scope, element) {
      element.addClass("my-popover");
      scope.$watch('tt_isOpen', function (value) {
        if (value) {
          element.addClass("open");
        } else {
          element.removeClass("open");
        }
      });
    }
  };
});

app.directive("tooltip", function () {
  return {
    restrict: 'EA',
    priority: -1000, // Run last
    link: function (scope, element) {
      element.addClass("my-tooltip");
      scope.$watch('tt_isOpen', function (value) {
        if (value) {
          element.addClass("open");
        } else {
          element.removeClass("open");
        }
      });
    }
  };
});

次に、次のようなスタイルを定義します。

.my-popover.open {
    background-color: red; 
}

.my-tooltip.open {
    font-style:italic;
    color: orange;
}

残念ながら、元の実装の詳細に少し依存しています (一体どこtt_isOpenから来たのか)。

ここでチェックしてください。

于 2013-11-15T18:22:38.013 に答える