基于angularjs的嵌套指令实现无限级下拉树菜单

由于项目中会大量用到无限级下拉树，为此找了很多基于jquery的tree的插件，但都不能很好的兼容angularjs，费了一番功夫之后，终于用angularjs的嵌套指令完成了这个功能，起初对于代码还不是十分的理解，现在重新再将代码和逻辑梳理一下，并分享给大家。首先给大家看下成品是这个样子的 ↓

html：

treeview.js:

var app = angular.module('orderManagement', ['ui.router'])//[里面放项目需要用到的依赖]
app.directive('treeView',[function(){

    return {
        restrict: 'E',
        templateUrl: '/treeView.html',
        scope: {
            treeData: '=',
            canChecked: '=',
            textField: '@',
            itemClicked: '&',
            itemCheckedChanged: '&'
        },
        controller:['$scope', function($scope){
            /*点击展开或者收起*/
            $scope.itemExpended = function(item, $event){
                item.$$isExpend = ! item.$$isExpend;
                $event.stopPropagation();
            };
            // 判断展开节点样式
            $scope.getItemIcon = function(item){
                var isLeaf = $scope.isLeaf(item);
                if(!isLeaf){
                    return item.$$isExpend ? 'icon expand-icon glyphicon glyphicon-unchecked': 'icon expand-icon glyphicon glyphicon-stop';
                }

            };
            // 判断箭头方向
            $scope.getItemArrow=function (item) {
                var isLeaf = $scope.isLeaf(item);
                if(!isLeaf){
                    return item.$$isExpend ? 'glyphicon glyphicon-chevron-down': 'glyphicon glyphicon-chevron-right';
                }

            }

            $scope.isLeaf = function(item){
                return !item.nodes || !item.nodes.length;
            };

            /*点击获取节点*/
            $scope.warpCallback = function(callback, item, $event){
                ($scope[callback] || angular.noop)({
                    $item:item,
                    $event:$event
                });
            };
        }]
    };
}])

controller.js:

app.controller('repaymentConfig',function ($rootScope,$scope,$http) {   
 /*树状图*/
    $scope.getTree=function()
    {
        /*点击打印节点*/
        vm.itemClicked = function ($item) {
            vm.selectedItem = $item;
       $http({ //获取当前登录人的权限树
           method:'GET',
           url:"/package.json"
       }).then(function (res) {
           var obj={};
           obj.data=res.data.data;
           vm.tree=obj;
           vm.itemClicked(vm.tree.data)
           
       },function (err) {
           console.log(err)
       })
        return vm;
    };
    $scope.getTree();
    /*树形菜单下拉*/
    $("body").on('mousedown','#box li a', function (e) {
        $('.mtree-active').not($(this).parent()).removeClass('mtree-active');
        $(this).parent().addClass('mtree-active');
    });
})

angularjs指令真的是很强大，刚刚入门，还需要多加学习，有不足之处请各位大神们指出，互相学习进步！

项目中用到的css和package.json可以在我的资源中下载

http://download.csdn.net/download/weixin_38707512/10232885