AngularJS 利用指令集成ZTree

前段时间一直在看AngularJS的资料，感觉是个很好的框架，很想有机会尝试用它做点什么。

JQuery ZTree是国内非常不错的JQuery插件，功能齐全，文档和API也非常的友好，之前项目上常用此插件。

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。
AngularJS 利用指令集成ZTree

AngularJS 利用指令集成ZTree

相关推荐