如何在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>" 
    } 
    };