ng-repeat z ng-transclude wewnątrz dyrektywy
Chcę utworzyć listę z niestandardowym zachowaniem, gdy zmienia się zawartość. Próbuję stworzyć dyrektywę dla tego, ale trochę się gubię, jak połączyć ng-transclude z dyrektywą ng-repeat. Czy ktoś może mnie postawić na tropie?
HTML:
<div ng-app="myApp">
<div ng-controller="ctrl">
<mylist items="myItem in items">
<span class="etc">{{myItem}}</span>
</mylist>
</div>
</div>
Javascript:
angular.module('myApp', [])
.controller('ctrl', function ($scope) {
$scope.items = ['one', 'two', 'three'];
})
.directive('mylist', function () {
return {
restrict:'E',
transclude: 'element',
replace: true,
scope: true,
template: [
'<ul>',
'<li ng-repeat="WhatGoesHere in items" ng-transclude></li>',
'</ul>'
].join(''),
link: function (scope, element, attr) {
var parts = attr.items.split(' in ');
var itemPart = parts[0];
var itemsPart = parts[1];
scope.$watch(itemsPart, function (value) {
scope.items = value;
});
}
}
});
Mam część tego trochę pracytutaj
EDYTOWAĆ:Kryteria:
Szablon elementu musi być zdefiniowany w widoku, a nie w dyrektywie i musi mieć dostęp do właściwości elementu w zakresie podrzędnym. Idealnie chciałbym to zdefiniować tak, jak w dyrektywie ng-repeatDyrektywa musi mieć dostęp do listy, abym mógł ustawić właściwe zegarki i zmieniać rzeczy. Jeśli to możliwe, chciałbym mieć łatwy dostęp do wygenerowanych elementów DOM (mogę to zrobić równieżelement[0].querySelectorAll('ul>li')
czy coś, musi działać tylko w Chrome).Jeśli to możliwe, chciałbym ponownie użyć logiki w dyrektywie ng-repeat, ponieważ robi już wiele z tego, czego chcę. Najlepiej nie chcę kopiować kodu. Chcę tylko zwiększyć jego zachowanie, a nie zmienić