8

これはとても簡単なことのように思えますが、私はそれを行う方法について頭を悩ませることができません.

ここに私が欲しいものがあります:

<my-buttons>
  <my-button ng-click="doOneThing()">abc</my-button>
  <my-button ng-click="doAnotherThing()">def</my-button>
</my-buttons>

それは次のようになります。

<ul class="u">
  <li class="l"><button ng-click="doOneThing()">abc</button></li>
  <li class="l"><button ng-click="doAnotherThing()">def</button></li>
</ul>

ng-clickが の上にありbutton、ラッピングの内側にあることに注意してくださいli。ただし、通常のトランスクルージョンでは が に配置ng-clickされliます。

私の最善の試みは、このフィドルです：http://jsfiddle.net/WTv7k/1/そこで、ng-clickをクラスに置き換えたので、いつ機能するか、機能しないかを簡単に確認できます。

これを実現する方法のアイデアはありますか? 本当に簡単な場合は、フロントページのタブ/ペインの例を拡張して、属性を維持しながら、ペインの周りにラッパーを含めることができます。

4

1 に答える 1

8

replace:trueを使用すると、置換プロセスによってすべての属性/クラスが古い要素 ( <my-button ...> ) から新しい要素 (テンプレートのルート要素<li ...> ) に移行されます。Transclude は、古い要素のコンテンツを指定された (ng-transclude) 要素に移動します。移行された属性を受け取るテンプレート内の要素を変更する簡単な方法があるかどうかはわかりません。

目的を達成するには、おそらく my-button ディレクティブのカスタム コンパイル関数でいくつかの dom 操作を行うことができます。ただし、 my-button ディレクティブで新しいisolateスコープを作成することをお勧めします:

<my-buttons>
  <my-button click-fn="doOneThing()">abc</my-button>
  <my-button click-fn="doAnotherThing()">def</my-button>
</my-buttons>

(ng-click を click-fn に変更したことに注意してください)

module.directive('myButtons', function () {
  return {
    restrict:'E',
    transclude:true,
    replace:true,
    template:'<ul class="u" ng-transclude></ul>'
  }
});

module.directive('myButton', function () {
  return {
    scope:{clickFn:'&'},
    restrict:'E',
    transclude:true,
    replace:true,
    template:'<li class="l"><button ng-click="clickFn()" ng-transclude></button></li>'
  }
});

あなたの fiddleの作業バージョンも作成しました。

分離スコープ ( scope:{clickFn:'&'} )がどのように機能するかを理解するには、ディレクティブに関する角度ガイドを読むことをお勧めします 。

于 2013-04-08T18:10:21.090 に答える