无法从指令树生成正确的HTML

Question

我有一个指令结构，我用它来简化用户界面。指令的实现应该处理复杂性。指令结构如下：

  <re-widget id="widget_html_content">

      <re-list name="HtmlContent" query="all">

          <re-items each="item">

              <div>
                  <span> {{item.content}} </span>
              </div>

          </re-items>

      </re-list>

  </re-widget>

上面应该生成以下风格的HTML：

 <div id="widget_html_content">
      <div ng-controller="ListCtrl" name="HtmlContent" query="{}" class="HtmlContent">
            <div ngRepeat="item in ListCtrl.items">
                <div item="item" ng-controller="ItemCtrl">
                    <div>
                        <span> {{item.getContent()}} </span>
                    </div>
                </div>
            </div>
      </div>
</div>

这基本上是一个转换任务（将指令HTML转换为标准HTML），但有一些注意事项。以下是要求：

（1）re-widget创建了隔离范围，因为它可以在页面中重用，可能具有相同的数据输入

（2）重新列表标签将自身转换为使用ListCtrl，ListCtrl知道如何使用输入NAME和QUERY属性/参数获取列表数据

（3）re-items标签通过使用用户定义的内部模板显示列表中的每个项目。所以基本上它是列表项的ng-repeat。但是，每个ng-repeated项都有自己的ItemCtrl控制器实例。 ItemCtrl实例将获得对项目模型和数据的引用，以便它可以公开项目数据的API。注意：项目模型是re-items标记中每个属性的值。

我在http://plnkr.co/edit/Ja0uDb630RYsSjVOGNRb?p=preview

处有大部分代码

非常感谢任何帮助！