NG-重复一个指令内NG-transclude [英] ng-repeat with ng-transclude inside a directive

问题描述

我要创建一个列表与自定义行为时，它的内容发生变化。我试图创建此指令，但我得到怎样的NG-transclude与NG重复指令结合起来有点失落。有人可以把我的轨道上？

I want to create a list with custom behavior when it's content changes. I try to create a directive for this but I get a bit lost with how to combine the ng-transclude with the ng-repeat directive. Can somebody put me on track?

HTML：

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

使用Javascript：

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

我已经得到了这里这个有些工作的一部分

I've got part of this somewhat working here

标准：

• 的项目的模板必须在视图中定义的，而不是在指令中，它必须能够访问项目属性在子作用域。理想我想定义这个喜欢在NG-重复指令完成


• 的指令必须能够访问列表，以便我可以设置适当的手表和改变的东西。如果可能的话，我想可以很方便地生成的DOM项目（我也能做到这一点与元素[0] .querySelectorAll（'UL＆GT;李'）什么的，它只有在Chrome工作）。


• 如果可能，我想重新使用在NG-重复指令逻辑，因为它已经做了很多我想要的东西。 preferably我不想复制code。我只是想增强它的行为，而不是改变它

• The template of the item must be defined in the view, not in the directive and it must have access to an item property in a child scope. Ideally I want to define this like it is done in the ng-repeat directive
• The directive must have access to the list so I can set proper watches and change things. If possible I would like to have easy access to the generated DOM items (I can also do it with element[0].querySelectorAll('ul>li') or something, It only has to work on Chrome).
• If possible I would like to reuse the logic in the ng-repeat directive because it does already do a lot of what I want. Preferably I don't want to copy the code. I just want to augment its behavior, not change it

推荐答案

解决了自己的问题：

我能做到这一点的编译步骤（的jsfiddle ）加入NG-repeat属性时，模板编译和喂养它我属性的内容。

I am able to do it in the compile step (jsfiddle) by adding the ng-repeat attribute when the template is compiled and feeding it the content of my attribute.

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

javascipt的：

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

这篇关于NG-重复一个指令内NG-transclude的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！