0

私は次のモデルを持っています：

{
  content: "Hello world, this is a sample content",
  notes: {
    content: "side note, some text here.",
    index: 2
  }
}

上記のモデルを次のHTMLにコンパイルするのが好きです。

<div class="content">
    Hello world,*
    <div class="note">side note, some text here.</div>
    this is a sample text. 
</div>

これはどのように行うことができますか？私の知る限り、最良の方法は、のようなディレクティブを使用すること<div content="{{ content }}"></div>です。私はこのディレクティブを書いてコンパイルサービスを使用しようとしましたが、まだあまり成功していません...

HTMLでコンパイルされたメモを2番目の単語の後のコンテンツに挿入したい（メモのインデックス位置が2であるを参照）。

ここに2つのテンプレートがあります。1つはコンテンツ用で、もう1つはメモ用です。そのビューでメモを編集し、2番目の作業の後にコンテンツテキストに入力したいと思います。次に、そのビューに対してコンテンツをコンパイルしたいと思います。

4

2 に答える 2

2

私は従うと思います。メモは、余白のメモのように、またはツールチップのようにスタイル設定されますよね？

これは、ディレクティブで非常に簡単に実行できるはずです。私はそれをこのようにインスタンス化します（実装の詳細はあなた次第ですが）：

<div note-section 
  note="{{notes.content}}" 
  note-index="{{notes.index}}" 
  content="{{content}}">
</div>

大丈夫。次に、リンク関数内で、これらすべての属性にアクセスできます。そこで、$ watchで変更を確認し、変更が発生したら、scope.content文字列で単語が存在する適切なインデックスを検索し、文字scope.noteIndex列を2つにスライスして、次のようなメモテンプレートを挿入します。

var tmpl, childElement;

tmpl = beforeNote + '<span note="{{note}}"></span>' + afterNote;
childElement = $compile( tmpl )( scope );

element.append( childElement );

このnote要素は、（セキュリティのために）分離スコープを持つディレクティブです。

次に、レンダリングされたDOMノードは上記の目標に一致します。これは非常に一般的であり、実装に応じて無数のバリエーションがありますが、これは私が従う一般的なパターンです。

PlunkerまたはjsFiddleでそれを突き刺して、思いついたものを投稿してください！

于 2013-01-20T23:21:20.530 に答える
0

質問: メモを HTML の特定の位置 (インデックス) に表示する必要があるのはなぜですか?なぜ常に前後に表示できないのですか? 特定の理由がありますか、それともスタイリングをサポートするためですか?

スタイリングをサポートしようとしている場合は、 などを使用するなど、これを達成するためのより優れた簡単な方法がありますfloat: right。

私の知る限り、そのような出力を達成する方法は組み込まれていません。その特定の HTML が必要な場合は、次の jsFiddle を試すことができます: http://jsfiddle.net/69ApD/。

于 2013-01-20T23:37:26.620 に答える