0

nav タグを介してネスト可能なナビゲーション メニューを効果的に構築するためのカスタム ディレクティブ セットがあります。以前、トランスクルージョンされたテキストの内容を取得する方法についていくつか質問がありました。私はそれを理解しましたが、後でテンプレートに表示されないように、トランスクルードされた要素を削除する方法があるかどうか疑問に思います。This Plunkerを使用すると、要素がトランスクルージョンされた要素のテキストを取得していることがわかります。しかし、それはまだng-transcludedivに含まれています。

plunker 内のコードを見ることができますが、plunker 内の対応するコードは次のとおりです。

//Other Code Here
controller:function($scope,$element,$attrs,$transclude){
        this.parents = [];

        var el = $transclude();

        if(angular.equals($attrs.menuTitle, undefined)) {
          $attrs.menuTitle= el.text().trim().split('\n')[0];
          el.remove(); //Runs, still leaves the transcluded element
        }





        this.addSubmenu = function(parent){

          this.parents.push(parent);
        };

      },
//Other Code Here

価値についての私の知識$transcludeは最小限です-私がここで取り組んだ作品は、ここで多くのグーグルとチェックの質問に出くわしただけです.

あなたが提供できる助けに感謝します。

4

2 に答える 2

1

次のような関数を使用して、を削除してng-transclude手動でトランスクルージョンを実行できます。$transclude

$transclude(function (clones) {
  if ($attrs.menuTitle === undefined) {
    $attrs.$set('menuTitle', clones.text().trim().split('\n')[0]);
  }

  var children = [];

  angular.forEach(clones, function (el) {
    // only transclude DOM node that you need here
    if (el.nodeName === 'PARENT' || el.nodeName === 'CHILD') {
      children.push(el);
    }
  })

  $element.find('div').append(children);        
});

プランカーの例: http://plnkr.co/edit/jLvhzcX0uh1xQTTqtxXu?p=preview

于 2014-08-15T10:41:58.290 に答える
1

そのプランカーが機能している場合に何を表示する必要があるのか​​ わからないため、それを達成する方法を説明するのは困難です.

トランスクルージョンについてもう少し詳しく教えていただければ幸いです。

実際、要素のトランスクルージョンをもう少し制御したい場合linkは、次のシグネチャを持つ関数で処理することをお勧めします。

link: function (scope, element, attributes, controller, transclude)

次に、リンク関数内で、提供されたtransclude関数を使用して要素で何かを行うことができます。

transclude(scope, function(clone, scope) {
  element.append(clone);
});

最初の引数は、transcluded 要素をバインドするスコープです。

補足: デフォルトの機能は、トランスクルージョンディレクティブが存在するコントローラーの新しい (非アイソレート) サブスコープです。つまり、アイソレート スコープでディレクティブを使用している場合、トランスクルードされたコンテンツはそれを見ることができませんデフォルトで。ただし、この例では、おそらくこれについて心配する必要はありません。

2 番目の引数は、複製された要素とその要素の新しいスコープを受け取る関数です。この関数内ではclone、 をディレクティブのelementに追加したり、テンプレート内の前後のどこかに配置したり、完全に無視したりできます。

最後に、rememberng-transcludeはディレクティブそのものです。基本的ng-transcludeには、上記のすぐに使える実装です (ただし、サイド ノートで述べたように、別のスコープを使用します)。そのため、transclude関数をng-transclude使用し、テンプレート内にまだある場合は、transcluded 要素の 2 つのコピーが見つかります。ng-transcludeつまり、自分でコンテンツを手動でトランスクルージョンしない場合にのみ使用してください。

于 2014-08-15T09:12:14.090 に答える