jquery - 如何将 JQuery 元素绑定到 AngularJS 模型？

Question

我有一个 AngularJS 模型，它应该动态绑定 HTML 元素。现在，每当我尝试将模型的值设置为 JQuery 对象时，我都会收到一条错误消息：

TypeError: Converting circular structure to JSON
at Object.stringify (native)

这是一个简单的jsfiddle 示例。

有没有办法让代码完美运行？究竟什么是圆形？

Answer 1

简短的回答：您的Fiddle 可以使用以下任一行来修复（取决于您需要的元素）：

$scope.myElement = $('#foo').prop("outerHTML");
$scope.myElement = $('#foo').html();

此更改将防止 Chrome 浏览文档树太深（或者更确切地说，太高）。

我相信您的 Fiddle 中的问题与 Chrome 对 jQuery 返回的对象进行字符串化的方式有关。在这个字符串化过程中，它可能也会尝试对父文档进行字符串化 - 并且在那里它与 Angular 魔法交互 - 以一种糟糕的方式。

顺便说一句，提供的 Fiddle 中的代码不会导致提到的错误。在 Firefox 中，运行 Fiddle 不会导致错误。

我不清楚您打算做什么，但我相信您可能正在寻找$compile 服务提供的功能。它将一段 HTML 字符串或 DOM 编译成模板并生成模板函数，然后可以使用该函数将范围和模板链接在一起。

如前所述，您不应该从控制器访问 DOM。

在我看来，您的方法看起来非常 jQuery-ish：您似乎正在尝试基于 DOM 操作数据。Angular 的方法是创建一个“数据驱动的文档”——模型中的数据应该决定 DOM 的内容。