我正在使用jQuery和AngularJS开发Ajax应用程序。
当我使用jQuery的html功能更新div的内容(包含AngularJS绑定)时,AngularJS绑定不起作用。
html
以下是我正在尝试执行的代码:
$(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绑定将停止工作。
#dynamicContent
这在AngularJS中可能无效,但是我最初使用jQuery构建了应用程序,后来又开始使用AngularJS,因此无法将所有内容都迁移到AngularJS。非常感谢在AngularJS中实现此功能的任何帮助。
您需要$compile先将HTML字符串插入HTML,然后再将其插入DOM中,以便angular有机会执行绑定。
$compile
在您的小提琴中,它看起来像这样。
$("#dynamicContent").html( $compile( "<button ng-click='count = count + 1' ng-init='count=0'>Increment</button><span>count: {{count}} </span>" )(scope) );
显然,$compile必须将其注入控制器才能正常工作。
在$compile文档中阅读更多内容。