一尘不染

AngularJS + JQuery:如何使动态内容在angularjs中工作

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'>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>

我在具有ID的div内包含动态内容#dynamicContent,并且具有一个刷新按钮,当单击刷新时,该按钮将更新该div的内容。如果不刷新内容,增量将按预期工作,但是刷新后,AngularJS绑定将停止工作。

这在AngularJS中可能无效,但是我最初使用jQuery构建了应用程序,后来又开始使用AngularJS,因此无法将所有内容都迁移到AngularJS。非常感谢在AngularJS中实现此功能的任何帮助。


阅读 310

收藏
2020-07-04

共1个答案

一尘不染

您需要$compile先将HTML字符串插入HTML,然后再将其插入DOM中,以便angular有机会执行绑定。

在您的小提琴中,它看起来像这样。

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

显然,$compile必须将其注入控制器才能正常工作。

$compile文档中阅读更多内容

2020-07-04