ng-repeat在指令内部与ng-transclude一起使用。

10 浏览
0 Comments

ng-repeat在指令内部与ng-transclude一起使用。

我想创建一个具有自定义行为的列表，当其内容发生变化时。我试图为此创建一个指令，但是我对如何将ng-transclude与ng-repeat指令结合使用感到有些困惑。有人能帮我吗？

HTML：


   {{myItem}}

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: [
      '
    ',
        '
  • ',
      '
'
    ].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; 
      });      
    }
  }
});

我已经在这里部分实现了here

编辑：

要求：

- 项目的模板必须在视图中定义，而不是在指令中，并且必须在子作用域中访问item属性。理想情况下，我想要像ng-repeat指令中那样定义它。

- 指令必须访问列表，以便我可以设置正确的监视器并进行更改。如果可能的话，我想要轻松访问生成的DOM项（我也可以使用`element[0].querySelectorAll('ul>li')`之类的方法，它只需要在Chrome上工作即可）。

- 如果可能的话，我想要重用ng-repeat指令中的逻辑，因为它已经做了我想要的很多事情。最好不要复制代码。我只想增强它的行为，而不是改变它。

0