测试表指示问题

Question

以下是我的指令代码：

currentApp.directive('testList', ['$compile', function ($compile) { 

    return{ 
     restrict: 'E', 
     template: '<table></table>', 
     replace: true, 
     compile: function (elem) { 
      return function ($scope, elem) { 
       var arr = ['Jay', 'John', 'David']; 
       angular.forEach(arr, function (val) { 
        elem.append('<tr><td>' + val + '</td></tr>'); 


       }); 
       $compile(elem)($scope); 
      } 

     } 

    } 

}]); 

，这是我的测试代码：

describe('Tabletest', function() { 

    var element, scope, elem; 
    var linkingFn; 
    beforeEach(module('angularlearnApp')); 

    beforeEach(inject(function ($compile, $rootScope) { 
     scope = $rootScope; 
     elem = angular.element('<test-list></test-list> '); 
     linkingFn = $compile(elem); 
     element = linkingFn(scope); 
    })); 

    it('Testing table', function() { 

     console.info(element); 
    }); 
}); 

这是测试的输出：

Object{0: <table class="ng-scope">JayJohnDavid</table>, 1: , length: 2} 

我我只是想知道为什么tr和td标签没有出现在这里，只有值出现。

Answer 1

您需要.html()而不是.append()，因为tr是表格内容，您不会将它们追加到表格末尾。 ;）

此外，您需要在将循环中的表格行传递到表格中之前建立表格行，如果不是索引中的最新项目/名称将继续取代之前的表格，并且最终会生成一个表格只有一个以“David”作为内容的表格行。

currentApp.directive('testList', ['$compile', function ($compile) { 

    return { 
     restrict: 'E', 
     template: '<table/>', 
     replace: true, 
     link: function ($scope, elem) { 
      var arr = ['Jay', 'John', 'David'], trHTML =''; 
      angular.forEach(arr, function (val) { 
       trHTML += '<tr><td>' + val + '</td></tr>'; 
      }); 
      angular.element(elem).html(trHTML); 
      $compile(elem)($scope); 
     } 
    } 
}]); 

JSFIDDLE