在AngularJS中使用框架的实现版插件的方法

前段时间一直在看AngularJS的资料，感觉是个很好的框架，很想有机会尝试用它做点什么jQuery ZTree。是国内非常不错的框架插件，功能齐全，文档和应用程序接口也非常的友好，之前项目上常用此插件AngularJS。功能虽然非常强大，但用户界面上提供的插件不像框架那么多，而且只能通过管理的定义扩展的用户界面插件，虽然国外已经提供了一些基于管理的的树功能实现，但毕竟不像实现版那样强大，而且树是做项目中很长用的一个基本功能。因此，花了一点时间做了一个例子将实现版应用到AngularJS中。

实现版和后台数据的交互首先，肯定是在页面中引入开发的相关脚本，例如模块（例如app.js)、控制器（例如controller.js)、Angularjs的脚本并进行相关标记的使用，然后引入实现版的样式包和zTreed脚本，可以参看一下代码：

！DOCTYPE html html lang=' zh-CN ' ng-app=' app ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1' title树型菜单/title link href=' plugins/bootstrap-3。3 .5/CSS/bootstrap。量滴CSS ' rel='样式表link href=' CSS/ztreestyle。CSS ' rel='样式表/head %包括././include/header.html % % include ././include/top菜单。html % div id=' content ' class=' content clear fix ' ng-controller=' wtConfigInfo ' ul tree id=' tree ' style=' font : normal 12px/35px ' Arial '；color : # dcdcdc ' class=' z tree ' ng-model=' SelectNode ' value=' 1 '/div % include ././include/页脚。html % script src=' http : plugins/jquery-1。11 .3 .量滴js ' type=' text/JavaScript '/script script src=' http : plugins/bootstrap-3。3 .5/js/自举。量滴js ' type=' text/JavaScript '/script script src=' http 3360 './/js/angular。量滴js ' type=' text/JavaScript '/script script src=' http ://js/angular/app。js ' type=' text/JavaScript '/script script src=' http : './/js/angular/controller。js ' type=' text/JavaScript '/script script src=' http :/plugins/zTree/jquery。zTree。全-3.5。js ' type=' text/JavaScript '/script/body/html在上面的在保险商实验所标签中添加了指令树，这样在加载开发中，就可通过指令树来进行菜单数据的获取。具体的代码可参考以下代码：

var app=angular.module('app '，[])；//树形结构app.directive('tree '，function(){ return { required : '？ngModel '，restrict:'A '，link:function($scope，element，attrs，ng model){ var setting={ data : { simpledata : { enable : true } }，callback : {在单击： function(treeId，treeNode)之前){//点击菜单时进行的处理var zTree=$。fn。zTree。GetztreeObj('树')；if(treeNode。isparent){ ztree。expandnode(TreeNode)；返回false} else { window。位置。href=TreeNode。网址；返回真；} } } };//向控制器发送消息，进行菜单数据的获取$scope .$emit('menu '，attrs[' value '])；//此处属性['值]为保险商实验所中的价值值，此处作为标记使用//接受控制器返回的菜单的消息$scope .$on('menuData '，函数（事件，数据){ $.fn.zTree.init(元素，设置，数据);//进行初始化树形菜单var zTree=$。fn。zTree。GetztreeObj('树')；var selectName=$('#selectName ').val()；if(SelectNAmE==' undefined ' | | SelectNAmE==' '){ z tree。selectnode(ztree。getnodebyparam(' id '，' 1 ')；//默认第一个选中$('#selectName ').val(ztree。getselectednodes()[0].代码);//赋值} else { for(var I=0；idata . lengthi){ if(data[I][' code ']==select name){ z tree。selectnode(ztree。getnodebybparam(' code '，data[I][' code '])；} } } });} } });在上述代码中，使用$scope .$emit('menu '，attrs[' value '])；向父控制器发送请求数据，在控制器代码中可以接受此消息，并使用$http向后台进行数据的请求，并将从数据库中请求来的数据发送个子控制器。控制器的代码可参考如下：

函数wtConfigInfo($scope，$http){ //接受子控制器发送的消息$scope .$on('菜单'，函数(事件，参数){ $ http。get('/common funcode ').成功（函数（数据){ //发送消息给子控制器$scope .$broadcast('menuData '，dealMenuData(数据，参数));});});} 这样，就完成了实现版和后台数据的交互。

利用指令集成实现版的实例

！doctype html html lang=' en ' ng-app=' app ' head meta charset=' utf-8 ' title z tree/title link rel='样式表href='css/app.css' link rel='样式表href=' CSS/bootstrap。CSS ' link rel='样式表href=' CSS/动画。CSS ' link rel='样式表href=' CSS/ztree style/z tree style。CSS ' script src=' http 3360 lib/jj

使用“严格”；/* App Module */var App Module=angular . Module(' App '，[])；appModule.directive('tree '，function () { return { require: '？ngModel '，restrict: 'A '，link:函数($scope，element，attrs，ng model){//var opts=angular . extend({ }，$scope。$ eval(attrs . nluploadify))；var设置={ data : { key : { title : ' t ' }，simpledata : { enable : true } }，callback: { onClick:函数(事件、treeId、treeNode、clickFlag) { $scope。$apply(function () { ngModel。$ SetViewValue(TreeNode)；});} } };Varznodes=[{id: 1，pid: 0，name: '普通父节点'，t: '我很普通，请点击我'，open: true}，{id3360 11，pid3360 1，name: '叶节点-1 '，T: '我很普通，只需点击我' }，{id: 12，pid: 1，name3360T: '我很普通，只需点击我' }，{id:2，pid33600，name:' nb的父节点'，t: '我可以点击它，但不能点击我的子节点。如果你有点击的能力，可以试试吗？open: true}，{id: 21，pid3360 2，name: '叶节点2-1 '，t: '你们有哪家公司？随意点我吗？当心.点击： false}，{id: 22，pid3360 2，name: '叶节点2-2 '，t: '我有我爸要照看，点击我的小心.click: false }，{id: 23，PId: 2，name: '叶节点2-3 '，t: '至少我也是领导，所以不要要求普通人点击我.单击3360 false}，{id: 3，pid3360 0，名称： '按下父节点'，t: '。我好害怕.open: true，click: false}，{id: 31，pid: 3，name: '叶节点3-1 '，t: '唉，随便点我吧' }，{id: 32，PId: 3，name: '叶节点3-2 '，t: '唉，随便点我吧' }，{id: 33，pid3360 3，$.fn.zTree.init(元素，设置，Znodes)；} };});appmodule . controller(' my controller '，function($ scope){ })；实现功能：定义属性树，让ul tree class=' z tree ' ng-model=' selectNode '/ul自动变成有数据的树，点击树节点自动改变模型的select节点。