指令不生成模板

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

您需要做的就是摆脱字符串连接，添加一个控制器，然后将 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 2

最简单的方法就是使用指令。无需与控制器等复杂化

指令：

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

});

经过一点努力，我能够编写上面的代码。现在我的指令可以生成一个 table 和一个提供的 json 和一个动态模板。

指令不生成模板

directive not producing template

javascript

directive

angularjs