angularjsjquery插件_請教AngularJS 和 jQuery 混用的問題

① angularjs和jQuery的區別是什麼

這兩個就沒可比性。

jQuery是JS函數庫，並不是什麼框架
angular 是MVC的框架，是一群搞java的工程師寫的js框架

② 如何在angularjs中使用jquery的ztree插件

AngularJS
功能雖然非常強大，但UI上提供的插件不像JQuery那麼多，而且只能通過directive定義擴展的UI插件，雖然國外已經提供了一些基於
directive的Tree功能實現，但畢竟不像ZTree那樣強大，而且Tree是做項目中很長用的一個基本功能。
因此，花了一點時間做了一個例子將ZTree應用到AngularJS中。
zTree和後台數據的交互
首先，肯定是在頁面中引入Angularjs的相關腳本，例如模塊(e.g. app.js)、控制器(e.g. controller.js)、Angularjs的腳本並進行相關標記的使用，然後引入zTree的樣式包和zTreed 腳本，可以參看一下代碼：

<!DOCTYPE html>
<html lang="zh-CN" ng-app="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>樹型菜單</title>

<link href="plugins/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/zTreeStyle.css" rel="stylesheet">

</head>

<% include ./../include/header.html %>
<% include ./../include/top-menu.html %>

<div id="content" class="content clearfix" ng-controller="wtConfigInfo">
<ul tree id="tree" style="font:normal 12px/35px 'Arial';color:#dcdcdc;" class="ztree" ng-model="selectNode" value="1" >
</div>
<% include ./../include/footer.html %>

<script src="plugins/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="plugins/bootstrap-3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="..//js/angular.min.js" type="text/javascript"></script>
<script src="..//js/angular/app.js" type="text/javascript"></script>
<script src="..//js/angular/controllers.js" type="text/javascript"></script>
<script src="../plugins/zTree/jquery.ztree.all-3.5.js" type="text/javascript"></script>
</body>
</html>

在上面的在ul標簽中添加了指令tree,這樣在載入angularjs中，就可通過指令 tree來進行菜單數據的獲取。具體的代碼可參考以下代碼：

var app = angular.mole('app', []);
//樹形結構
app.directive('tree',function(){
return{
require:'?ngModel',
restrict:'A',
link:function($scope,element,attrs,ngModel){
var setting = {
data :{
simpleData:{
enable:true
}
},
callback:{
beforeClick:function(treeId, treeNode) {//點擊菜單時進行的處理
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
window.location.href=treeNode.url;
return true;
}
}
}
};
//向控制器發送消息，進行菜單數據的獲取
$scope.$emit("menu",attrs["value"]);//此處attrs["value"]為ul中的value值，此處作為標記使用
//接受控制器返回的菜單的消息
$scope.$on("menuData",function(event,data){
$.fn.zTree.init(element, setting, data);//進行初始化樹形菜單
var zTree = $.fn.zTree.getZTreeObj("tree");
var selectName = $("#selectName").val();
if(typeof selectName == "undefined" || selectName == ""){
zTree.selectNode(zTree.getNodeByParam("id","1"));//默認第一個選中
$("#selectName").val(zTree.getSelectedNodes()[0].code);//賦值
}else{
for(var i =0; i<data.length;i++){
if(data[i]["code"] == selectName ){
zTree.selectNode(zTree.getNodeByParam("code", data[i]["code"]));
}
}
}
});

}
}
});

在上述代碼中，使用$scope.$emit("menu",attrs["value"]);向父控制器發送請求數據，在控制器代碼中可以接受此消息，並使用$http向後台進行數據的請求，並將從資料庫中請求來的數據發送個子控制器。控制器的代碼可參考如下：

function wtConfigInfo($scope,$http){

//接受子控制器發送的消息
$scope.$on("menu",function(event,params){
$http.get("/commonfuncode").success(function(data){
//發送消息給子控制器
$scope.$broadcast("menuData",dealMenuData(data,params));
});
});
}

這樣，就完成了zTree和後台數據的交互。

利用指令集成ZTree的實例

<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>ZTree</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">

<script src="lib/jquery-1.10.2.min.js"></script>
<script src="lib/jquery.ztree.all-3.5.js"></script>
<script src="lib/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>

<body ng-controller='MyController'>
<ul tree class="ztree" ng-model="selectNode"></ul>
</body>
<pre>
{{selectNode | json}}
</pre>

</body>
</html>

app.js

'use strict';

/* App Mole */
var appMole = angular.mole('app', []);
appMole.directive('tree', function () {
return {
require: '?ngModel',
restrict: 'A',
link: function ($scope, element, attrs, ngModel) {
//var opts = angular.extend({}, $scope.$eval(attrs.nlUploadify));
var setting = {
data: {
key: {
title: "t"
},
simpleData: {
enable: true
}
},
callback: {
onClick: function (event, treeId, treeNode, clickFlag) {
$scope.$apply(function () {
ngModel.$setViewValue(treeNode);
});
}
}
};

var zNodes = [
{ id: 1, pId: 0, name: "普通的父節點", t: "我很普通，隨便點我吧", open: true },
{ id: 11, pId: 1, name: "葉子節點 - 1", t: "我很普通，隨便點我吧" },
{ id: 12, pId: 1, name: "葉子節點 - 2", t: "我很普通，隨便點我吧" },
{ id: 13, pId: 1, name: "葉子節點 - 3", t: "我很普通，隨便點我吧" },
{ id: 2, pId: 0, name: "NB的父節點", t: "點我可以，但是不能點我的子節點，有本事點一個你試試看？", open: true },
{ id: 21, pId: 2, name: "葉子節點2 - 1", t: "你哪個單位的？敢隨便點我？小心點兒..", click: false },
{ id: 22, pId: 2, name: "葉子節點2 - 2", t: "我有老爸罩著呢，點擊我的小心點兒..", click: false },
{ id: 23, pId: 2, name: "葉子節點2 - 3", t: "好歹我也是個領導，別普通群眾就來點擊我..", click: false },
{ id: 3, pId: 0, name: "郁悶的父節點", t: "別點我，我好害怕...我的子節點隨便點吧...", open: true, click: false },
{ id: 31, pId: 3, name: "葉子節點3 - 1", t: "唉，隨便點我吧" },
{ id: 32, pId: 3, name: "葉子節點3 - 2", t: "唉，隨便點我吧" },
{ id: 33, pId: 3, name: "葉子節點3 - 3", t: "唉，隨便點我吧" }
];
$.fn.zTree.init(element, setting, zNodes);
}
};
});
appMole.controller('MyController', function ($scope) {
});

實現功能：定義tree這個屬性，使<ul tree class="ztree" ng-model="selectNode"></ul>自動變成一個有數據的tree，點擊樹節點，自動變更model 的selectNode。

③ 請教AngularJS 和 jQuery 混用的問題 · Ruby China

這不是哪個好學的問題,客觀的說jquery就是JS,JS擁有好幾種框架,jquery
就是其中一種!說白專了,juqery就是JS的精簡版,寫更屬少的代碼,做更多的事!
而不要去操作dom因為ng的開發模式跟jquery是不同的

④ angularjs 需要依賴jquery庫嗎

AngularJS是Google的一個前端JS框架，它與jQuery沒有關系，所以不需要jQuery庫。

⑤ jquery操作angularjs對象

jquery是一個非常強大的js框架，angularjs是一個非常牛的前端mvc框架。雖然用其中的任何一個框架在項目中夠用了，但是有時候這兩個框架需要混合著用，雖然不推薦。但有時候混合用時，卻非常方便，不要考慮那麼多，只要能實現功能，何樂而不為？
最近做的一個產品，前端用angularjs,但表格框架用的卻是jquery.datatables.js,當然其中少不了碰到jquery與angularjs交互問題。由於公司保密，我就不用真實項目演示了，寫個小demo吧，當然真實的項目要復雜得多。
<!DOCTYPE
html>
<html
ng-app="ngDemo">
<head>
<title></title>
<script
src="http://libs..com/jquery/1.10.2/jquery.min.js"></script>
<script
src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script
type="text/javascript">
$(function()
{
$('#btn').on('click',function(e)
{
$('#dv2').text(Number($('#dv2').text())+1);//jquery+angular實現
$('#dv3').text(Number($('#dv3').text())+1);//純jquery實現
});
});
var
app=angular.mole('ngDemo',[]);
app.controller('ngCtrl',['$scope',function
($scope)
{
$scope.test1=0;
$scope.test2=0;
}]);
</script>
</head>
<body
ng-controller="ngCtrl">
test1:<div
id="dv1">{{test1}}</div>
test2:<div
id="dv2"
ng-bind="test2"
ng-model="test2"></div>
test3:<div
id="dv3">0</div>
<button
id="btn"
ng-click="test1=test1+1">click
me
+1</button>
</body>
</html>
代碼
效果
點了兩次，這三個值都加到2了,貌似沒什麼問題。
真沒問題嗎？請看
視圖上是2，model上還是0,沒有實現同步，怎麼辦？
那麼問題又來了，jquery和angularjs哪家強呢？
改下代碼
$('#btn').on('click',function(e)
{
var
scope=angular.element('#dv2').scope();//jquery+angular實現
scope.test2=scope.test2+1;//直接修改test2的值
console.log(scope.test2);
$('#dv3').text(Number($('#dv3').text())+1);//純jquery實現
});
再看看
點了兩次，中間那個變成了1，其它兩個是2。
點了3次，中間那個變成了2，但是scope.test2的值卻是什麼，它怎麼總是顯示慢一拍？
再改改
$('#btn').on('click',function(e)
{
var
scope=angular.element('#dv2').scope();//jquery+angular實現
scope.test2=scope.test2+1;//直接修改test2的值
scope.$apply();//綁定到視圖
console.log(scope.test2);
$('#dv3').text(Number($('#dv3').text())+1);//純jquery實現
});
再看看
這下這三個都同步了。中葯好，西葯快，中本結合！jquery簡單，angularjs方便，兩者結合...大功告成。
注意：scope對象一定要調用$apply(),否則會出現視圖與model不同步。
以上所述就是本文的全部內容了，希望大家能夠喜歡。

⑥ 如何在AngularJs中調用第三方插件庫

很簡單，給插件寫一個directive。
在這里，我會使用一個簡單的jquery插件Toolbar.js 的DEMO。
這是我們如何在jquery中創建一個tooltip的：
[html] view plain
在CODE上查看代碼片派生到我的代碼片

<div id="format-toolbar" class="settings-button">
<img src="xxx">
</div>


<div id="format-toolbar-options">
<a href="#"><i class="icon-align-left"></i></a>
<a href="#"><i class="icon-align-center"></i></a>
<a href="#"><i class="icon-align-right"></i></a>
</div>
[javascript] view plain
在CODE上查看代碼片派生到我的代碼片

$('#format-toolbar').toolbar({
content: '#format-toolbar-options',
position: 'left'
});

⑦ 如何在AngularJS中使用插件

⑧ angularJs中怎麼模擬jQuery中的this

如果你要用this就別用angluar了，他們各有所長，angluarjs有它自己的mvvm實現方式，不需要取元素

⑨ jquery載入後觸發在angularjs中為什麼不起作用

因為onload載入完，angularjs還沒載入完，而angularjs不會載入2次，你給angularjs生成的元素綁定事件自然是不會起作用

⑩ angular可以和jquery共用嗎

建議把angular的controller范圍縮小，這樣jq和angular的交集就可以避免了。你說的動態效果用angular一樣可以實現，沒必要和jq混用。

導航:首頁 > 編程語言 > angularjsjquery插件

angularjsjquery插件

與angularjsjquery插件相關的資料

友情鏈接