角JS動態指令模板

最近，我試圖創建角的js遞歸樹視圖時碰到這個代碼來其中testList是TestCtrl中的JSON對象數組，例如：角JS動態指令模板

$scope.testList = [ 
    {text: 'list item 1'}, 
    {text: 'list item 2', children: [ 
     {text: 'sub list item 1'}, 
     {text: 'sub list item 2'} 
    ]}, 
    {text: 'list item 3'} 
];

此代碼運行良好，但temp收集指令和成員指令是硬編碼的。我想知道是否有辦法從html中獲取集合和成員的模板。事情是這樣的：

<div ng-controller="TestCtrl"> 
    <ul recurse="testList"> 
     <li>{{member.text}}</li> 
    </ul> 
</div>

遞歸指令將是收集指令的替代，但模板遞歸才肯的<ul>元素它是連接到。

同樣，會員指令的模板將從<ul>元素的子元素創建;在這種情況下爲<li>元素。

這可能嗎？

在此先感謝。

來源

2014-05-10 Ben Guest

在您的指令中，您可以使用transclude: true並在HTML中定義模板的一部分。指令模板可以使用ng-transclude來包含它。

想象一下這個模板：

<div my-list="testList"> 
    <b>{{item.text}}</b> 
</div>

在你的指令，你可以使用transclusion控制列表項被呈現方式：

module.directive('myList', function() { 
    return { 
     restrict: 'A', 
     transclude: true, 
     replace: true, 
     scope: { 
      collection: '=myList' 
     }, 
     template: '<ul><li ng-repeat="item in collection"><div ng-transclude></div><ul><li ng-repeat="item in item.children"><div ng-transclude></li></ul></li></ul>' 
    }; 
});

Plunker

來源

2014-05-10 12:31:19 Sebastian

感謝您的回答。這很有用，但並不完全符合我的要求。對於初學者來說，我提供的陣列在實踐中可能會有很多層次;一個項目可以有子項目，他們可以有子項目等，這就是爲什麼我需要遞歸。此外，我正在嘗試爲html中的指令定義模板，以便我可以在許多位置使用該指令，但根據使用的元素更改呈現（或編譯）的方式。 –

角JS動態指令模板

回答

相關問題