測試表指示問題

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