我正在使用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中工作的帮助都非常感谢.
当我使用jQuery执行DOM操作(添加新的HTML)时,AngularJS不会自动检测新HTML中的变量并用它们的值替换它们.例如:
$scope.showSummary = function($event){
$($event.currentTarget).html("<div>{{row}}</div>");
};
这是一个简单的例子,但在元素更改HTML后(此功能被称为ng-click),输出它仍然{{row}}不是什么行应该是指在上下文/范围.