指令不生產模板

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

最簡單的是隻用一個指令。無需與控制器等複雜化

指令：

.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> 

Answer 2

所有你需要做的就是擺脫字符串連接，添加一個控制器，然後綁定ngRepeat到scope.rows，它會使用任何你想要的模板，爲您創造一些行

JS

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

app.controller('myGridTableCtrl', function($scope) { 

}); 

app.directive('myGridTable',function($http){  
    return { 
    restrict:'AE', 
     scope, 
     link:function(scope,element,attrib){ 
      $http.get(attrib.src).success(function(response) { 
       scope.rows = response.data; 
      });    
     } 

}; 
}); 

HTML

<my-grid-table ng-controller="myGridTableCtrl"> 
    <div ng-repeat="row in rows"> 
     {{row.property}} 
    </div> 
</my-grid-table> 

Answer 3

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

app.directive('myGridTable',function($http){ 

    var tbl_tpl=''; 

    var linkFunc = function(scope,element,attrib){ 
      $http.get(attrib.src).success(function(response){ 
       scope.rows = response.data; 
       tbl_tpl = tbl_tpl + "<thead>"; 
        tbl_tpl = tbl_tpl + "<tr>"; 
        angular.forEach(scope.rows[0],function(v,k){ 
         tbl_tpl=tbl_tpl + "<th>" + k + "</th>" ; 
        }); 
        tbl_tpl = tbl_tpl + "</tr>"; 
       tbl_tpl = tbl_tpl + "</thead>"; 

       tbl_tpl = tbl_tpl + "<tbody>"; 
       angular.forEach(scope.rows,function(value,key){ 
        tbl_tpl = tbl_tpl + "<tr>"; 
        angular.forEach(value,function(v,k){ 
         tbl_tpl=tbl_tpl + "<td>" + v + "</td>" ; 
        }); 
        tbl_tpl = tbl_tpl + "</tr>"; 
       }); 
       tbl_tpl = tbl_tpl + "</tbody>"; 

       element.html(tbl_tpl); 
      }); 
    }; 


    return{ 
      restrict: 'AE', 
      link: linkFunc 
    }; 

}); 

一點點的努力我能寫後以上代碼。現在我的指令可以用一個提供的json和一個動態模板生成一個表格。