テーブルを動的にアングルで作成しようとしています

Question

In this plunk私はテーブルを持ったディレクティブを持っています。私はテーブルに2つのセルを持つ1つの行を動的に追加しようとしています。それでも、テーブルには1つのセルしか表示されません。このコードで何が問題になっていますか？

Javascriptを

angular.module('app', []); 


angular.module('app') 
.directive('directive1', function() { 


    var directive = {}; 

    directive.restrict = 'E'; 

    directive.scope = true; 

    directive.template = '<table class="c" border="1"></table>'; 

    directive.link = function(scope, element, attrs) { 

       var t = angular.element(".c"); 
       var r1 = t.append("<tr></tr>"); 
       var col1 = r1.append("<td></td>"); 
       col1.text("1111"); 
       var col2 = r1.append("<td></td>"); 
       col2.text("2222"); 

    }; 

    return directive; 

}); 

Answer 1

をこれは、同様に仕事ができる：

var t = angular.element(".c"); 
var r1 = t.append(angular.element(document.createElement('tr'))); 
var col1 =angular.element(document.createElement('td')).html("1111"); 
var col2 =angular.element(document.createElement('td')).html("2222"); 
r1.append(col1); 
r1.append(col2); 

Answer 2

これは働いていた：

  var t = angular.element(".c"); 
      var r1 = $("<tr></tr>") 
      t.append(r1); 
      var col1 = $("<td></td>"); 
      r1.append(col1); 
      col1.text("1111"); 
      var col2 = $("<td></td>"); 
      r1.append(col2); 
      col2.text("2222");