Тестирование вопрос директивы таблица

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} 

I мне просто интересно узнать, почему тэг и тд не появляются здесь, появляются только значения.

Answer 1

Вам необходимо .html() вместо .append(), так как tr s - это содержимое таблиц, и вы не добавляете их в конец таблицы. ;)

Также вам нужно построить строку таблицы в цикле, прежде чем передавать ее в таблицу, если не последний элемент/имя в индексе не заменит предыдущий, и вы получите таблицу с только одна строка таблицы с «Дэвидом» в качестве ее содержимого.

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