AngularJS + JQuery的：如何获得动态内容angularjs工作 [英] AngularJS + JQuery : How to get dynamic content working in angularjs

问题描述

我正在同时使用jQuery和AngularJS一个Ajax应用中。

I am working on a Ajax app using both jQuery and AngularJS.

当我更新的内容（包含AngularJS绑定）使用jQuery的 HTML 函数的div时，AngularJS绑定不起作用。

When I update content (which contains AngularJS bindings) of a div using jQuery's html function, the AngularJS bindings doesn't work.

下面是一个的jsfiddle 版本的什么，我试图做的。

Here is a JSFiddle version of what I am trying to do.

我与ID #dynamicContent 的div里面的动态内容，我有一个刷新按钮的点击刷新时，这个div，将更新的内容。增量按预期工作，如果我不更新的内容，但我刷新之后，AngularJS结合停止工作。

I have dynamic content inside a div with the ID #dynamicContent, and I have a refresh button that would update contents of this div when refresh is clicked. Increment works as expected if I don't refresh the content, but after I refresh, the AngularJS binding stops working.

这可能不是AngularJS有效的，但我最初构建的应用程序使用jQuery和使用以后AngularJS，所以我不能迁移一切AngularJS启动。在AngularJS得到这个工作的帮助是很大的AP preciated。

This may not be valid in AngularJS, but I initially built application with jQuery and started using AngularJS later on so I can't migrate everything to AngularJS. Any help with getting this working in AngularJS is greatly appreciated.

推荐答案

您需要将其插入到DOM，使角变之前调用 $编译的HTML字符串有机会执行绑定。

You need to call $compile on the HTML string before inserting it into the DOM so that angular gets a chance to perform the binding.

在你的小提琴，它会是这个样子。

In your fiddle, it would look something like this.

$("#dynamicContent").html(
  $compile(
    "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>"
  )(scope)
);

显然， $编译必须注入到你的控制器，这个工作。

Obviously, $compile must be injected into your controller for this to work.

了解更多在 $编译文档 。

Read more in the $compile documentation.

这篇关于AngularJS + JQuery的：如何获得动态内容angularjs工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！