1

我正在尝试使以下代码工作（angular 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>

所以我们的想法是我们将用 <section> 部分替换行。此外，我希望将 .rows-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

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

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

4

0 回答 0