javascript - 指令不生成模板

Question

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

app.directive('myGridTable',function($http){
     var tbl_tpl = '<table>';
     
     return {
         restrict:'AE',
          template:'{{tbl_tpl}}',
          replace:true,
          link:function(scope,element,attrib){
               $http.get(attrib.src).success(function(response) {
                    scope.rows = response.data;
                    //rows and columns population....
                    angular.forEach(scope.rows,function(value,key){
                         console.log(value);
                         tbl_tpl = tbl_tpl + "<tr>";
                         angular.forEach(value,function(val,k){
                              tbl_tpl=tbl_tpl + "<td>" + val + "</td>" ;
                         });
                         tbl_tpl = tbl_tpl + "</tr>";
                    });
                    tbl_tpl = tbl_tpl + "</table>";
                    scope.tbl_tpl=tbl_tpl;
               });             
          }
          
     };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

我的查询是，如果替换关闭，“tbl_tpl”会生成纯文本，否则显示错误......因此我有什么办法解决这个问题

Answer 1

最简单的方法是使用指令。无需使 Controller 等复杂化。

指令:

.directive('tableList', function($http) {
    return {
        restrict:'E',
        template: '<table><tr ng-repeat="row in rows"><td>{{row.property}}</td></tr></table>',
        link:function(scope,element,attr){
            scope.rows = [];
            $http.get('/api/rows').then(function(response) {
                scope.rows = response.data;
            });             
        }
    };
});

然后在模板中使用该指令:

<table-list></table-list>