angular.js封装的树形指令

html

ul.tree-show
    sub-transclude-set
        ng-transclude
    li.parent(ng-repeat='(key,item) in treeData',ng-include="'app/dist/directive/treeview/subtree.html'")

 

.title(ng-class='{"btn btn-sm btn-danger":returnData==item}')
    span(ng-if="item.nodes&&!item.hide" ng-click="item.hide=!item.hide")
        i.glyphicon.glyphicon-collapse-down
    span(ng-if="item.nodes&&item.hide" ng-click="item.hide=!item.hide")
        i.glyphicon.glyphicon-expand
    span(ng-class="{'subli':!item.children}",ng-click="selectFn(item)")
        input(type="checkbox"  ng-model="item.check" ng-if="type==='check'&&(!item.commission)")
        input(type="checkbox"  disabled="disabled" ng-if="type==='check'&&item.commission")
        span.name(ng-bind='item[[config.text]]')        
        span.name(ng-bind='item[[config.commoty]]' ng-if="item.supplier_id == config.suppid||config.suppid == undefined"  ng-class="{'gray':config.commoty&&(item.commission)}")
    span(ng-include="'dist/tree-transclude.html'")
ul(ng-show="!item.hide")
    li(ng-repeat='(key,item) in item.nodes|newObj', ng-include="'app/dist/directive/treeview/subtree.html'")

　　

js

/**
 * lt-tree Module
 *
 * Description
 */
angular.module('app').directive('treeView',['$templateCache', function($templateCache) {
	return { 
		scope: {              
			treeData: '=',
			returnData: '=',
			type: "@",                        
			config: "=", 
			fn:"="                       
		},
		restrict: 'EA',
		templateUrl: 'app/dist/directive/treeview/treeview.html',
		controller: 'treeViewCtrl',
		transclude:true,
		link: function(scope, iElement, iAttrs) {
			var config=scope.config;
			if(!config.text) config.text='text';
			var subTransclude=iElement.find('sub-transclude-set');
			subTransclude.remove();
            var subHtml=subTransclude&&subTransclude[0].innerHTML;
            var appendHtml=angular.element(subHtml)[0].innerHTML;
            // console.log(appendHtml)
            $templateCache.put('dist/tree-transclude.html',appendHtml);
        }
	};
}]).filter('newObj', function() {
	return function(obj) {
		return obj;
	};
}).controller('treeViewCtrl', ['$scope', function($scope) {

	var type=$scope.type;
	var checkTree=function(tree,check){
		tree.check=check;
		if(tree.nodes&&tree.nodes[0]){
			tree.nodes.forEach(function(child){
				checkTree(child,check);
			});
		}
	};
	var selectTree=function(tree){
		$scope.returnData=tree;
	};
	$scope.selectFn=function(tree){
		if(type==='check'){
			checkTree(tree,!tree.check);
		}else if(type==='select'){
			selectTree(tree);
		} 
	};
}]);

　　

页面样式