在 jquery 的原始 html 中使用 angular 指令答案

【问题标题】：Using angular directive in raw html within jquery在 jquery 的原始 html 中使用 angular 指令
【发布时间】：2016-07-21 09:28:24
【问题描述】：

我在收到ajax 响应后创建html，例如：

var html = '';
html = '<div ng-click="deleteRecord($event)">delete</delete>';
$('.main).append(html);

但是ng-click 指令在直接添加到 html 文档时无法正常工作。我不太了解 Angular 如何与 DOM 绑定。

所以我需要一些支持来了解当我添加html 到jquery 时是否可以完成这项工作？

谢谢。

【问题讨论】：

【解决方案1】：

您可以使用默认 Angular 库中包含的 bindHtml 指令，而不是将 HTML 附加到您的元素。

<div data-ng-bind-html="someHtml"></div>

只需将 HTML 字符串应用于控制器的 someHtml 属性，它应该可以正常工作。确保在您的控制器中包含 ngSanitize（或“$sanitize”），因为这样可以确保不会插入破坏性的 HTML。

【讨论】：

【解决方案2】：

您可以在插入 HTML 后致电$apply()。这会强制 angular 重新消化绑定。

var html = '';
html = '<div ng-click="deleteRecord($event)">delete</delete>';
$('.main).append(html);
$scope.$apply();

【讨论】：

【解决方案3】：

试试这个：

$('.main').append($compile(html)($scope));
$scope.$apply();

希望对你有帮助。

PD：在使用 Angular 时，我会尽量避免使用 jQuery。

【讨论】：