2級模型編譯

我有以下型號：2級模型編譯

{ 
    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）的內容。

我在這裏有兩個模板，一個是內容，第二個是註釋。我想在它的視圖中編譯筆記，然後在第二次工作後將其輸入到內容文本中。然後，我想按照它的觀點編輯內容。

來源

2013-01-20 Fitzchak Yitzchaki

我想我會關注。筆記將被設計爲看起來像保證金筆記或作爲工具提示，對嗎？

這應該很容易在指令中完成。我將這樣實例化（雖然實現細節取決於您）：

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

好的。然後，在您的鏈接功能中，您可以訪問所有這些屬性。於是我將$表的更改，並在它們出現時，搜索scope.content字符串，其中scope.noteIndex話住適當的索引，然後切片串入兩片，將一張紙條模板它之間就像如下：

var tmpl, childElement; 

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

element.append(childElement);

note元素是一個具有隔離範圍的指令（用於安全性）。

然後，渲染的DOM節點將與上面的目標匹配。這是非常通用的，有很多變體取決於你的實現，但這是我遵循的一般模式。

在Plunker或jsFiddle上刺戳它，併發布你想出的東西！

來源

2013-01-20 23:21:20

爲什麼你建議分開這兩個指令？如果內容可信，是否有任何安全問題？ –

@FitzchakYitzchaki對不起，混亂。單獨的指令是爲了可擴展性;隔離範圍是爲了安全。這些只是最佳實踐。我會使用一個單獨的指令，以便實現（例如模板）與可擴展性原因的邏輯分開。對於安全性來說，這不是一個「可信內容」的問題，而是擔心指令作用域上的變量或函數將與父類的作用域相同，因此意外覆蓋它。隔離範圍用於範圍安全。 –

問題：爲什麼筆記必須出現在特定位置（索引）的HTML中，爲什麼它總是出現在之前或之後？是否有特定的原因，還是支持造型？

如果你想支持的造型，有更好，更容易的方式來做到這一點，如使用float: right等

據我所知，沒有內置的方法來完成這樣的輸出。如果您必須具有特定的HTML，您可以嘗試以下jsFiddle：http://jsfiddle.net/69ApD/。

來源

2013-01-20 23:37:26 Schmuli

這有效，但它將DOM和數據綁定在一起，這是我們不應該做的。我也會謹慎地將太多的實現（如模板）放在指令邏輯中，因爲它使它不便於使用。 –

是的，我試圖支持樣式，並在'note'類上使用'float：right'。爲了達到我想要的視覺效果，浮動的div應該位於該位置。 –

我想展示如何實現這樣的HTML，並且我認爲我們的答案是相互補充的@JoshDavidMiller。我會更努力的造型，以避免這樣的要求altogther。 – Schmuli

回答

相關問題