在AngularJS中使用jQuery的zTree插件的方法

前端之家收集整理的这篇文章主要介绍了在AngularJS中使用jQuery的zTree插件的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前段时间一直在看AngularJS的资料,感觉是个很好的框架,很想有机会尝试用它做点什么。 jQuery ZTree是国内非常不错的JQuery插件功能齐全,文档和API也非常的友好,之前项目上常用此插件。 AngularJS 功能虽然非常强大,但UI上提供的插件不像JQuery那么多,而且只能通过directive定义扩展的UI插件,虽然国外已经提供了一些基于 directive的Tree功能实现,但毕竟不像ZTree那样强大,而且Tree是做项目中很长用的一个基本功能。 因此,花了一点时间做了一个例子将ZTree应用到AngularJS中。@H_404_1@

zTree和后台数据的交互

首先,肯定是在页面中引入Angularjs的相关脚本,例如模块(e.g. app.js)、控制器(e.g. controller.js)、Angularjs的脚本并进行相关标记的使用,然后引入zTree的样式包和zTreed 脚本,可以参看一下代码:@H_404_1@
<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> 树型<a href="/tag/caidan/" target="_blank" class="keywords">菜单</a>

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

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

<div id="content" class="content clearfix" ng-controller="wtConfigInfo">