AngularJS + JQuery：如何在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中工作的幫助都非常感謝。
3 回答
白板的微信
TA貢獻1883條經驗 獲得超3個贊
因為angular.element(document).injector()給出了錯誤injector is not defined 所以，我創建了一個可以在AJAX調用之后運行的函數或者使用jQuery更改DOM的函數。
function compileAngularElement( elSelector) {
var elSelector = (typeof elSelector == 'string') ? elSelector : null ;
// The new element to be added
if (elSelector != null ) {
var $div = $( elSelector );
// The parent of the new element
var $target = $("[ng-app]");
angular.element($target).injector().invoke(['$compile', function ($compile) {
var $scope = angular.element($target).scope();
$compile($div)($scope);
// Finally, refresh the watch expressions in the new element
$scope.$apply();
}]);
}
}通過傳遞新元素的選擇器來使用它。像這樣
compileAngularElement( '.user' ) ;
- 3 回答
- 0 關注
- 775 瀏覽
添加回答
舉報
0/150
提交
取消