记一次angular1中使用ztree树形结构

版权声明：每天都要加油鸭 https://blog.csdn.net/weixin_43462746/article/details/85253258

需求逻辑是：项目发票要新增个报销功能，-部门单据类型展示-选择后生成对应的报销单据并打开

后台要求要树形结构展示，去百度找到这个插件，建议先建个小文件目录看参照着是否生成功再导入项目，这样不费时间清晰明朗些！

正文开始：

//1.引入所需要的依赖
 <link href="css/zTreeStyle.css" rel="stylesheet" type="text/css">
 <script src="lib/jquery/dist/jquery.min.js"></script>
    <!-- <script src="lib/jquery/dist/jquery-1.4.4.min.js"></script> -->
    //试了几个jquery都可以
 <script src="lib/jquery/dist/jquery.ztree.all.js"></script>
 <script src="lib/jquery/dist/jquery.ztree.exhide.js"></script>

//2.html页面 必须设置class="ztree"的容器（具体可根据自己项目来设计结构等
<div id="resultsdata" class="ztreeBox" style="overflow:auto;height:    320px;">
	<ul id="tree" class="ztree">
 	</ul>
</div>

//3.
  $scope.setting = {
  treeId: 'tree',
  data: {
    simpleData: {
        enable: true,
		idKey: 'id',
		pIdKey: 'parentId',
		rootPId: '0'
   },  
   	key:{
      name:"name"
  	}
},
  callback: {//点击节点
		onClick: function (event, treeId, treeNode, clickFlag) {
             // alert(treeNode.tId + ", " + treeNode.name);
             $scope.selectedIds.parentId=treeNode.parentId;
             $scope.selectedIds.nodeId=treeNode.id;
             console.log( $scope.selectedIds)
                }
  }
   $.fn.zTree.init($("#tree"), $scope.setting, $scope.zNodes).expandAll(true);//这个可根据自己项目逻辑放在合适的位置，项目中是请求数据成功后，生成树并展示expandAll(true)设为默认展开

这里补个后续，页面多次重复调用接口报销获得到数据，树形结构却没法展示出来，谷歌调试发现页面上每调用一次重新生成树结构的弹出框，页面上多个弹出框了，试了销毁树结构我这里不行，然后用的AngularJS中$destory监听事件(这个事件会在路由发生跳转的时候触发。)对弹出框移除（angular还是不太熟啊），这一大问题记一笔