Я хочу создать список с пользовательским поведением при его изменении содержимого. Я пытаюсь создать директиву для этого, но я немного теряюсь в том, как объединить ng-transclude с директивой ng-repeat. Может ли кто-нибудь поставить меня на путь?
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;
});
}
}
});
У меня есть часть этого несколько работающего здесь
EDIT:
Критерии:
- Шаблон элемента должен быть определен в представлении, а не в директиве, и он должен иметь доступ к свойству item в дочерней области. В идеале я хочу определить это, как это делается в директиве ng-repeat
- Директива должна иметь доступ к списку, чтобы я мог установить правильные часы и изменить их. Если возможно, я хотел бы иметь легкий доступ к сгенерированным элементам DOM (я также могу сделать это с помощью
element[0].querySelectorAll('ul>li')
или что-то еще, он должен работать только в Chrome). - Если возможно, я хотел бы повторно использовать логику в директиве ng-repeat, потому что она уже делает многое из того, что я хочу. Я предпочитаю не копировать код. Я просто хочу увеличить его поведение, а не изменять его.