chỉ thị không hoạt động bên trong <tr> đó là ng-repeat bị ràng buộc

Question

Tôi có một bảng nơi các hàng được lặp lại qua ng-repeat. tôi đang cố gắng để tạo ra một mẫu mà tạo ra cột <td> cho mỗi hàng <tr>

app.directive("customtd", function(){ 
    return { 
    restrict: 'E', 
    template: "<td>{{position.Name}}</td><td>{{position.Code}}</td>", 
    replace: true, 
    scope: { 
     position: '=' 
    } 
    } 
}); 

<table> 
    <tr ng-repeat="p in positions"> 
    <customtd position="p"></customtd> 
    </tr> 
</table> 

Vấn đề là mẫu tùy chỉnh td của tôi không trả lại gì cả. Ở đây tôi dự định thay thế <customtd> bằng số n <td> s - sẽ được quyết định dựa trên số lượng thuộc tính trên đối tượng dữ liệu của tôi, nhưng hiện tại tôi đang cố gắng để có được một chỉ thị đơn giản làm việc sẽ xuất ra hai cột.

MYPLUNKER: hiển thị trường hợp của vấn đề này và mã chỉ thị.

Answer 1

Như được chỉ ra trong các nhận xét, mẫu của chỉ thị phải có phần tử gốc đơn. Vì vậy, tôi sẽ đề nghị bạn di chuyển phần tử tr vào mẫu của chỉ thị, như sau: http://plnkr.co/edit/YjLEDSGVipuKTqC2i4Ng?p=preview

Answer 2

Như Pavlo đã viết, bạn có thể di chuyển phần tử tr vào mẫu cho chỉ thị. Một tùy chọn khác là sử dụng phần tử và chỉ thị td thay thế cho td của bạn bằng mẫu mà bạn muốn sử dụng.

<table> 
    <tr ng-repeat="p in positions"> 
    <td replace-me template="mytemplate.html" position="p"></td> 
    </tr> 
</table> 

Chỉ replaceMe

.directive("replaceMe", ["$compile", '$http', '$templateCache', function ($compile, $http, $templateCache) { 
     return { 
      restrict: 'A', 
      scope: { 
       position: "=" 
      }, 
      link: function (scope, element, attrs) { 
       function getTemplate(template) { 
        $http.get(template, {cache: $templateCache}).success(function (templateContent) { 
         element.replaceWith($compile(templateContent)(scope)); 
        }); 
       } 
       scope.$watch(attrs.template, function() { 
        if (attrs.template) { 
         getTemplate(attrs.template); 
        } 
       }); 


      } 
     } 
    }]); 

mytemplate.html

<td>{{position.Name}}</td> 
<td>{{position.Code}}</td> 
<td another-my-directive></td> 

plunker