Question

我试图让下面的代码工作（角1.4.3，jquery 2.1.4，chrome 45）：

<mec-row ng-repeat="row in [{id:'row1',val:'val1'},{id:'row2',val:'val2'}]">
    <cell>{{$index}}</cell><cell>{{row.id}}</cell><cell>{{row.val}}</cell>
</mec-row>

指令的模板（row.tmpl）：

<section>
  <div>
    <div class="checkbox">checkbox</div>
    <div class="rows-placeholder"></div>
  </div>
</section>

所以我们的想法是，我们要将行替换为＆lt; section＆gt;部分。此外，我希望.row-placeholder被mec-row中的任何内容替换。所有这一切都遵循以下指令：

(function(ng,$) {
  'use strict';

  ng.module('table').directive( 'mecRow', RowDirective );

  function RowDirective() {
    return {
      templateUrl: 'row.tmpl',
      restrict: 'E',
      link: link,
      transclude: true
    };

   function link(scope, element, attrs, ctrl, transclude) {
      $(element).find('.rows-placeholder').replaceWith(transclude());
    }
  }
})(angular,jQuery);

这并没有给我预期的结果（只放入数组中的最后一项）：

<!-- ngRepeat: row in [{id:'row1',val:'val1'},{id:'row2',val:'val2'}] -->
<mec-row ng-repeat="row in [{id:'row1',val:'val1'},{id:'row2',val:'val2'}]" class="ng-scope">
  <section>
    <div>
      <div class="checkbox">checkbox</div>

    </div>
  </section>
</mec-row>
<!-- end ngRepeat: row in [{id:'row1',val:'val1'},{id:'row2',val:'val2'}] -->
<mec-row ng-repeat="row in [{id:'row1',val:'val1'},{id:'row2',val:'val2'}]" class="ng-scope">
  <section>
    <div>
      <div class="checkbox">checkbox</div>    
      <cell class="ng-binding ng-scope">1</cell><cell class="ng-binding ng-scope">row2</cell><cell class="ng-binding ng-scope">val2</cell>    
    </div>
  </section>
</mec-row>
<!-- end ngRepeat: row in [{id:'row1',val:'val1'},{id:'row2',val:'val2'}] -->

最后，我想摆脱单元格标签并简单地用div替换它。如果我将这段代码添加到链接功能：

$('cell', $(element)).replaceWith(function(){
  return $("<div />").append($(this).contents());
});

......它最终会变得更加痛苦。控制台错误：

TypeError: Cannot set property 'nodeValue' of undefined

但是，现在只解析数组中的第一项。

我不太确定发生了什么，以及如何解决这个问题。希望你能帮忙。

如何在自定义指令上使用ngRepeat进行转换

0 个答案: