為每個ng-repeat指令渲染唯一的ng-transclude模板

Question

是否可以為指令中的每個元素呈現唯一的模板？ 我想表明我在說什么。 例如

 <div example-backgrounds images="['xyz.jpg','xyz2.jpg', 'xyz3.jpg','xyz4.jpg' ]" ><!-- directive then ng-repeat on each .jpg file --> <div><h1>Title</h1></div> <!-- transclude for xyz.jpg --> <div><button>Title2</button></div> <!-- transclude for xyz2.jpg --> <div><h2>Title3</h2></div> <!-- transclude for xyz3.jpg --> <div><h2>Hello <button>Title4</button></h2></div> <!-- transclude for xyz4.jpg --> </div> 

有4個.jpg文件，然后我想為每個元素渲染其他超越。 感謝幫助。

Answer 1

好吧，我解決了自己的問題。 有我的解決方案。 好嗎？ 有人有更好的代碼？ 有我的。

  function link(scope, element, attr,ctrl,transclude) { var index = 0; transclude(function(clone){ clone.each(function(v,k){ if(this.nodeType === 3) return; var currentClone = this; $timeout(function(){ $(element.find(".magic-bind")[index]).append(k); index++; }) }) }) } 

有到示例背景的鏈接功能。 這樣我們就可以得到正確的輸出。