前段时间一直在看angularjs的资料，感觉是个很好的框架，很想有机会尝试用它做点什么。
jquery ztree是国内非常不错的jquery插件，功能齐全，文档和api也非常的友好，之前项目上常用此插件。
angularjs 功能虽然非常强大，但ui上提供的插件不像jquery那么多，而且只能通过directive定义扩展的ui插件，虽然国外已经提供了一些基于 directive的tree功能实现，但毕竟不像ztree那样强大，而且tree是做项目中很长用的一个基本功能。
因此，花了一点时间做了一个例子将ztree应用到angularjs中。
ztree和后台数据的交互
首先，肯定是在页面中引入angularjs的相关脚本，例如模块(e.g. app.js)、控制器(e.g. controller.js)、angularjs的脚本并进行相关标记的使用，然后引入ztree的样式包和ztreed 脚本，可以参看一下代码：
树型菜单

在上面的在ul标签中添加了指令tree,这样在加载angularjs中，就可通过指令 tree来进行菜单数据的获取。具体的代码可参考以下代码：
var app = angular.module('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 在上述代码中，使用$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的实例
ztree {{selectnode | json}}
app.js
'use strict'; /* app module */ var appmodule = angular.module('app', []); appmodule.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); } }; }); appmodule.controller('mycontroller', function ($scope) { });
实现功能：定义tree这个属性，使
自动变成一个有数据的tree，点击树节点，自动变更model 的selectnode。