如何动态呈现指令模板?

时间:2015-03-26 23:00:48

标签: angularjs

假设我有一个表,以便在用户单击按钮时添加行。添加代码的行如下所示:

  success: function (data, textStatus, jqXHR) {
      $row = $('a#temp').parents('table').find('tr[id$=' + m + ']');
      var $new_rows = $(data['payload'].join("\n"));
      $row.after($new_rows);
  }

虽然成功是非角度回调函数,但ajax响应已经回来。

有效负载将包含HTML代码以及HTML中的控制器和指令。

我看到行已正确添加,但我没有看到新添加的行控制器和指令初始化。

欢迎提出任何建议。

由于

1 个答案:

答案 0 :(得分:0)

即使这是非常糟糕的主意,正如@tymeV在评论中提到的那样,您应该能够使用$compile服务做您想做的事。

只需将$compile注入包含AJAX调用的任何函数中(只要您还有$scope可用),您可以将成功处理程序更改为:

success: function (data, textStatus, jqXHR) {
    $row = $('a#temp').parents('table').find('tr[id$=' + m + ']');
    var $new_rows = $(data['payload'].join("\n"));
    $row.after($new_rows);
    $compile($new_rows)($scope);
    // if this is definitely the success handler for a jQuery.ajax() request or similar
    // then do the following. Otherwise, remove it.
    $scope.$digest();
}

这应该是最后的手段。你真的需要尝试放弃依赖jQuery,特别是做DOM操作,而是使用Angular指令。对于您和其他需要查看和维护代码的人来说,理解起来要容易得多。

请记住这句古老的格言,“总是编码,好像最终维护你的代码的人会是一个知道你住在哪里的暴力精神病患者。可读性代码。” (参见this question谁说了这个)。知道Angular的暴力精神病患者不会因为AngularJS的发展而对你犯下这个主要罪恶而深恶痛绝。