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中我正在使用

<div directive></div>

AngularJs指令在html bind

之后返回表

Answer 1

因为您在

中提出了后端（我认为）的请求

employeeDataServices.getEmployees()

您不能在指令中使用template属性。为了实现您的功能，您可以使用帖子链接功能

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

没有时间验证，但你得到了要点。

AngularJs指令在返回模板数据之前呈现

1 个答案: