如何使用AngularJS功能在一個div中插入多個div（即某種多元素模板）

Question

在我的AngularJS應用程序中，我想製作一些將多個HTML元素插入HTML元素的指令。

基本上，我想角建立這樣的結果：

<div class="maindiv"> 
    <!-- Below are some divs common to all "maindiv" --> 
    <div> ..XXX.. </div> 
    <div> ..YYY.. </div> 

    <!-- Below are some elements specific to maindiv1 --> 
    <div> ..ABCD.. </div> 
    <div> ..EFGH.. </div> 
    <div> ..IJKL.. </div> 
</div> 

<div class="maindiv"> 
    <!-- Below are some divs common to all "maindiv" --> 
    <div> ..XXX.. </div> 
    <div> ..YYY.. </div> 

    <!-- Below are some elements specific to this particular maindiv --> 
    <div> ..1235.. </div> 
    <div> ..5678.. </div> 
</div> 

...從HTML，看起來像這樣：

<div class="maindiv" generate-common-stuff> 
    <!-- Below are some elements specific to maindiv1 --> 
    <div> ..ABCD.. </div> 
    <div> ..EFGH.. </div> 
    <div> ..IJKL.. </div> 
</div> 

<div class="maindiv" generate-common-stuff> 
    <!-- Below are some elements specific to this particular maindiv --> 
    <div> ..1235.. </div> 
    <div> ..5678.. </div> 
</div> 

...或者是這樣的：

<div class="maindiv"> 
    <generate-common-stuff></generate-common-stuff> 

    <!-- Below are some elements specific to maindiv1 --> 
    ... 

當我試圖製作自己的指令時，Angular抱怨我的模板中有多個根元素。

請注意，由於與其他庫（JQueryMobile）不兼容，我無法在div下重新組合<div> ..XXX.. </div><div> ..YYY.. </div>並在模板中使用它。他們必須插入正好在maindiv

你有什麼想法如何實現？

Answer 1

試試編寫一個叫generate-stuff的指令，並將common和specific的東西作爲屬性綁定在範圍之外。

<generate-stuff common="commonStuffInScope" specific="specificStuffInScope"></generate-stuff> 

...在你的指令

myModule.directive('', function() { 
    return { 
    ... 
    scope: { 
     common: "=common", 
     specific: "=specific" 
    } 
    ... 
    }; 
}); 

所以在鏈接功能，您有一個雙向綁定無論對普通和範圍的具體變量。

相關型號文檔片段：http://docs.angularjs.org/guide/directive#directivedefinitionobject