AngularJsディレクティブがテンプレートデータを返す前にレンダリングする

Question

こんにちは、私はAngularJsディレクティブからテーブルを返してバインドしようとしています。

私の角度のコードは次のとおりです。

function directive($window, employeeDataServices) { 
    var directive = { 
     link: link, 
     restrict: 'EA', 
     renderOnFirstLoad: false, 
     template: myData() 
    }; 
    return directive; 
    function link(scope, element, attrs) { 
    } 
    function myData() { 
     angular.element(document).ready(function() { 
     employeeDataServices.getEmployees().then(function (response) { 
      var table = "<table>"; 
      table += "<tr>"; 
      table += "<th>Id</th>"; 
      table += "<th>Name</th>"; 
      table += "</tr>"; 
      angular.forEach(response, function (value, key) { 
      table += "<tr>"; 
      table += "<td>" + value.Id + "</td>"; 
      table += "<td>" + value.Name + "</td>"; 
      table += "</tr>"; 
      }); 
      table += "</table>"; 
      return table; 
     }); 
     }); 
    } 
    } 

とHTMLで私はあなたが要求を行っているのでAngularJsディレクティブは、HTMLバインド

Answer 1

後にテーブルを返す

<div directive></div> 

を使用していますバックエンド（私は思う）

employeeDataServices.getEmployees() 

ディレクティブにテンプレートプロパティを使用することはできません。あなたの機能を実装するために、ポストリンク機能を使用することができます

function directive($window, employeeDataServices) { 
var directive = { 
    restrict: 'EA', 
    renderOnFirstLoad: false, 
    compile: function() { 
     return { 
      post: function (scope, element, attrs) { 
       employeeDataServices.getEmployees().then(function (response) { 
        var table = "<table>"; 
        table += "<tr>"; 
        table += "<th>Id</th>"; 
        table += "<th>Name</th>"; 
        table += "</tr>"; 
        angular.forEach(response, function (value, key) { 
         table += "<tr>"; 
         table += "<td>" + value.Id + "</td>"; 
         table += "<td>" + value.Name + "</td>"; 
         table += "</tr>"; 
        }); 
        table += "</table>"; 
        element.append(table); 
       }); 
      } 
     } 
    } 
}; 
return directive; 
} 

確認する時間がありませんでしたが、要点を取得しました。