AngularJS和JQuery不能一起工作

-2

我有一個頁面，使用jQuery和完美工作。 JQuery位於兩個文件中：control.js和lightgallery.js。我在AngularJS中添加的所有內容都停止工作。我需要找到一種方法讓我的jQuery工作，而無需學習如何重寫角度中的所有功能。有什麼建議麼？AngularJS和JQuery不能一起工作

我用ngInclude添加的html都沒有使用angular。這只是簡單的HTML。

<!DOCTYPE html> 
<html ng-app=""> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>H</title> 
<!-- STYLESHEETS --> 
<link rel="stylesheet" href="/assets/common/css/split.css"> 
<link rel="stylesheet" href="/assets/common/css/control.css"> 
    <!-- JQUERY --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="/assets/common/js/bootstrap.min.js" type="text/javascript"> </script> 
<script src="/assets/common/js/control.js" type="text/javascript"></script> 
<!-- ANGULAR --> 
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 
<body id="home"> 


<div ng-include="'../assets/includes/left-panel.html'"></div> 

<!--/START TEMPLATE --> 
<div ng-include="'../assets/includes/template.html'"></div> 

</body> 
</html>

來源

2015-05-30 kimberlyvoo

你可以舉一個具體的例子，說明jQuery的哪些部分不起作用（最好是用代碼）？另外，看起來你已經做的不僅僅是「添加」Angular：你至少已經將一些HTML移動到了由'ngInclude'加載的部分內容中，所以擴展你所做的事情可能會有所幫助。 –

我用ngInclude添加的html都沒有使用angular。這只是HTML。 – kimberlyvoo

這裏是正在發生的事情：

jQuery代碼可能運行在文件準備：

$(function(){ 
    //your initialization code here 
});

的問題是，在你的模板，你的jQuery插件的目標元素是不當這個函數運行時添加到DOM。這是因爲Angular尚未將這些模板插入到DOM中。

您可以通過刪除ng-includes並將其替換爲模板本身中包含的標記（繞過ng-include）來驗證。

當使用Angular和jQuery插件時，這是一個典型的「錯誤」。

將jQuery插件與Angular集成的唯一「正確」方法是將插件包裝在指令中。

來源

2015-05-30 07:06:47

你能告訴我如何將插件包裝在指令中嗎？這很容易做到嗎？這聽起來像只是在jQuery插件之前和之後放置一段角碼。 – kimberlyvoo

我發佈了2個我正在使用的jquery插件文件。我不認爲lightgallery插件正在文檔上運行。我可能是錯的。 – kimberlyvoo

我會推薦閱讀[指令文檔]（https://docs.angularjs.org/guide/directive）。 [這篇文章也許是有用的]（http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html） –

AngularJS和JQuery不能一起工作

回答

相關問題