AngularJS + JQuery:如何在 angularjs 中获取动态内容 [英] AngularJS + JQuery : How to get dynamic content working in angularjs

问题描述

我正在使用 jQuery 和 AngularJS 开发 Ajax 应用程序.

当我使用 jQuery 的 html 函数更新 div 的内容(包含 AngularJS 绑定)时，AngularJS 绑定不起作用.

以下是我正在尝试做的代码:

$(document).ready(function() {$("#refreshButton").click(function() {$("#dynamicContent").html("<button ng-click='count = count + 1' ng-init='count=0'>增量</button><span>count: {{count}} </span>")});});

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {边框:1px纯红色；}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><div ng-app=""><div id='dynamicContent'><button ng-click="count = count + 1" ng-init="count=0">增量<span>count: {{count}} </span>

<button id='refreshButton'>刷新

我在 ID 为 #dynamicContent 的 div 中有动态内容，并且我有一个刷新按钮，可以在单击刷新时更新此 div 的内容.如果我不刷新内容，增量会按预期工作，但刷新后，AngularJS 绑定停止工作.

这在 AngularJS 中可能无效，但我最初使用 jQuery 构建应用程序，后来开始使用 AngularJS，因此我无法将所有内容迁移到 AngularJS.非常感谢在 AngularJS 中获得此功能的任何帮助.

解决方案

在将 HTML 字符串插入到 DOM 之前，您需要在 HTML 字符串上调用 $compile 以便 angular 有机会执行绑定.

在你的小提琴中，它看起来像这样.

$("#dynamicContent").html($编译("<button ng-click='count = count + 1' ng-init='count=0'>增量</button><span>count: {{count}} </span>")(范围));

显然，必须将 $compile 注入您的控制器才能使其正常工作.

在$compile 文档中阅读更多内容.

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

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

Following is code of what I am trying to do:

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

</style><script src="http://docs.angularjs.org/angular-1.0.1.min.js"></script><style>.ng-invalid {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="">
  <div id='dynamicContent'>
    <button ng-click="count = count + 1" ng-init="count=0">
        Increment
      </button>
    <span>count: {{count}} </span>
  </div>


  <button id='refreshButton'>
    Refresh
  </button>
</div>

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.

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.

解决方案

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屋！