angularjs 功能虽然非常强大，但ui上提供的插件不像jquery那么多，而且只能通过directive定义扩展的ui插件，虽然国外已经提供了一些基于 directive的tree功能实现，但毕竟不像ztree那样强大，而且tree是做项目中很长用的一个基本功能。
因此，花了一点时间做了一个例子将ztree应用到angularjs中。
<!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 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这个属性，使<ul tree class="ztree" ng-model="selectnode"></ul>自动变成一个有数据的tree，点击树节点，自动变更model 的selectnode。
