Ich möchte eine Liste mit benutzerdefiniertem Verhalten erstellen, wenn sich der Inhalt ändert. Ich versuche, eine Direktive dafür zu erstellen, aber ich verliere etwas, wie man die ng-transclude mit der ng-repeat Direktive kombiniert. Kann mich jemand auf die Spur bringen?

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; 
      });      
    }
  }
});

Ich habe einen Teil davon, der irgendwie funktioniertHier

BEARBEITEN:

Kriterien:

Die Vorlage des Elements muss in der Ansicht und nicht in der Direktive definiert sein und Zugriff auf eine Elementeigenschaft in einem untergeordneten Bereich haben. Idealerweise möchte ich dies so definieren, wie es in der ng-repeat-Direktive gemacht wirdDie Direktive muss Zugriff auf die Liste haben, damit ich die richtigen Uhren einstellen und Dinge ändern kann. Wenn möglich, möchte ich einen einfachen Zugriff auf die generierten DOM - Elemente haben (das kann ich auch mitelement[0].querySelectorAll('ul>li') oder so, es muss nur auf Chrome funktionieren).Wenn möglich, möchte ich die Logik in der ng-repeat-Direktive wiederverwenden, da sie bereits viel von dem macht, was ich will. Am liebsten möchte ich den Code nicht kopieren. Ich möchte nur sein Verhalten verstärken, nicht es ändern