如何在Angular Directive的鏈接函數中插入html？

Question

基本上我試圖填充錶行作爲手風琴頭在角度頁：

<div uib-accordion-group ng-repeat="deployment in deployments" is-open="deployment.isOpen"> 
     <uib-accordion-heading> 
     <status-Table deploy="{{deployment}}"></status-Table> 
     </uib-accordion-heading> 
    </div> 

我似乎無法找到一種方法，從部署對象進行插值，一旦我把它傳遞給statusTable指令，然後使用這些變量填充HTML：

app.directive('statusTable', function(){ 
    return { 
    restrict: "E", 
    scope: { 
     deploy: '@' 
    }, 
    link: function(scope, element, attrs){ 
     element.html("<table class='table table-hover'>"+ 
        "<tr>"+ 
        "<td>{{ attrs.deploy.deployment_name }}</td>"+ 
        "<td>{{ attrs.deply.region }}</td>"+ 
        "<td>{{ attrs.deploy.start_date }}</td>"+ 
        "<td>{{ attrs.deploy.deployment_date }}</td>"+ 
        "<td><i class='material-icons 
green'>check_circle</i></td>"+ 
        "</tr>"+ 
        "</table>"); 
    } 
    }; 

Answer 1

將'deploy'包括到'範圍'中時應該使用'='。

scope: { 
     deploy: '=' 
    } 

'='用於雙向綁定。改變你的HTML這樣的：

<status-Table deploy="deployment"></status-Table> 

另一種方式是先拉對象插入鏈接功能：

if(attrs.deploy){ 
    scope.deploy = scope.$eval(attrs.deploy); 
} 

Answer 2

1.Pass deployment使用=

2.使用template代替html

<status-Table deploy="deployment"></status-Table> 

app.directive('statusTable', function(){ 
    return { 
    restrict: "E", 
    scope: { 
     deploy: '=' 
    }, 
    template: "<table class='table table-hover'>"+ 
        "<tr>"+ 
        "<td>{{ deploy.deployment_name }}</td>"+ 
        "<td>{{ deploy.region }}</td>"+ 
        "<td>{{ deploy.start_date }}</td>"+ 
        "<td>{{ deploy.deployment_date }}</td>"+ 
        "<td><i class='material-icons 
green'>check_circle</i></td>"+ 
        "</tr>"+ 
       "</table>" 
    } 
    };