javascript - 既存の親と子のディレクティブ要素の間にディレクティブ要素を動的にネストする方法は?

Question

バックグラウンド：

コードベースへのアクセスが制限されているカスタム CMS を使用しています。そのため、いくつかのケースでは、JavaScript を使用していくつかの DOM 操作を行う予定です。

問題：

コンテナ ディレクティブがあり、コンテナにはプレーンな古い HTML アイテムがありますが、そのアイテムをサーバー側からのディレクティブとしてマークすることができません。また、プレーンな古い HTML アイテムには、ディレクティブであるサブコンテンツが含まれています。

例：

これが前です：

DIV[container-directive]

  DIV.some-item-in-html
    DIV[some-directive-in-the-content]


  DIV.some-item-in-html
    DIV[some-directive-in-the-content]

  ...

その後、DOM は次のようになります。

DIV[container-directive]

  DIV[container-item]       <-- This is what needs to be inserted

    DIV.some-item-in-html
      DIV[some-directive-in-the-content]

  DIV[container-item]       <-- This is what needs to be inserted

    DIV.some-item-in-html
      DIV[some-directive-in-the-content]

  ...

質問：

JavaScript を使用して、ディレクティブのネストの間にディレクティブである DOM 要素を挿入するための最良のアプローチについて、誰か提案がありますか?

いくつかの考え：

angularでコンパイルの前にDOMを操作すると思いますが、Angularのフレームワーク内でこれを行う方法があるのだろうか。

もう 1 つのオプションは、コンテナー ディレクティブのリンク後機能です。「container-item」というディレクティブ要素で HTML アイテムをラップし、アイテムを手動で $compile することができます。それで、私はこれを試しましたが、トランスクルードされたコンテンツを含むディレクティブが既に含まれているアイテムに関連するエラーが発生します。「ngTransclude」についての何かが予想外です。これは、すでに処理された内部ディレクティブに関連していると思います。