指令内的ng-repeat和ng-transclude

Question

我想在内容更改时创建具有自定义行为的列表。我尝试为此创建一个指令，但是我对如何将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; 
      });      
    }
  }
});

我已经在这里工作了一部分

编辑：

条件：

• 该项目的模板必须在视图中定义，而不是在指令中定义，并且必须有权访问子作用域中的项目属性。理想情况下，我想像在ng-repeat指令中那样定义它
• 该指令必须有权访问列表，以便我可以设置适当的监视并进行更改。如果可能的话，我希望可以轻松访问所生成的DOM项（我也可以使用DOM之类的element[0].querySelectorAll('ul>li')东西，它只能在Chrome上运行）。
• 如果可能的话，我想重用ng-repeat指令中的逻辑，因为它已经做了很多我想做的事情。最好是我不想复制代码。我只是想增强它的行为，而不是改变它

Answer 1

我自己解决了这个问题：

我可以在编译步骤（jsfiddle）中做到这一点，方法是在编译ng- repeat模板时添加属性，并向其提供属性的内容。

HTML：

<div ng-app="myApp">
  <div ng-controller="ctrl">
    <mylist element="myItem in items">{{myItem}}</mylist>
  </div>
</div>

Javascript：

var myApp = angular.module('myApp', [])

.controller('ctrl', function ($scope) {
  $scope.items = ['one', 'two', 'three'];
})

.directive('mylist', function ($parse) {
  return {
    restrict:'E',
    transclude: 'element',
    replace: true,
    scope: true,
    template: [
      '<ul>',
      '<li ng-transclude></li>',
      '</ul>'
    ].join(''),
    compile: function (tElement, tAttrs, transclude) {
      var rpt = document.createAttribute('ng-repeat');
      rpt.nodeValue = tAttrs.element;
      tElement[0].children[0].attributes.setNamedItem(rpt);
      return function (scope, element, attr) {
        var rhs = attr.element.split(' in ')[1];
        scope.items = $parse(rhs)(scope);
        console.log(scope.items);
      }        
    }
  }
});