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。
