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);
}
};
}]);
页面样式
angular.js封装的树形指令的更多相关文章
- angular.js封装的文件上传指令
今天把最近用到的东西整理一下,直接上代码,需要申请犀牛存储图片,文件 1.html div div img.img-thumbnail.center-block(ng-src="{{ltUp ...
- [学习笔记] 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX [转]
这是"AngularJS - 七步从菜鸟到专家"系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程 ...
- Angular JS 基础应用--第一篇
前 言 Android应用开发中,有一些功能虽然能够使用原生JS来实现,但是会比较的复杂,因此一些相应的框架应运而生了.框架相对于原生JS而言,从主观上来说,最大的改变就是代码 ...
- angular.js ng-repeat动态插入删除dom节点
既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与 控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并 ...
- angular.js 动态插入删除dom节点
angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...
- Angular JS学习之指令
1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
随机推荐
- 老李案例分享:定位JAVA内存溢出
老李案例分享:定位JAVA内存溢出 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.在poptest的loadrunner的培 ...
- js计算器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 课堂博客-----TreeView+++++XML形成博客
什么是XML? 解析:XML:Extensible Markup Language(可扩展标记语言) HTML:HyperLink Text Markup Language(超文本标记语言) xml ...
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- linux 线程编程详解
1.线程的概念: 线程和进程有一定的相似性,通常称为轻量级的进程 同一进程中的多条线程将共享该进程中的全部系统资源,如虚拟地址空间,文件描述符和信号处理等等.但同一进程中的多个线程都有自身控制流 (它 ...
- html5脚本编程
(1)跨文档消息传递,XDM.指的是来自不同域的页面间传递消息. XDM的核心是postMessage();向另一个地方传递数据,指是包含在当前页面中的iframe元素,由当前页面弹出的窗口. var ...
- 2017-4-18 ADO.NET
1.什么是ADO.NET? (是一种数据库访问技术) ADO.NET的名称起源于ADO(ActiveX Data Objects),是一个COM组件库,用于在以往的Microsoft技术中访问 ...
- 用 parseInt()解决的 小 bug
在做轮播模块的时候遇到问题是:你在 连续指示小按钮 时候再去 只有 点击 下一张按钮,出现bug: 指示小按钮的 className 当前显示的 calssName 为 undefined ! // ...
- lua 数据类型
lua 数据类型 8 种数据类型 类型 说明 nil 空类型 boolean 布尔类型 number 数值型, 浮点型 string 字符串 function 函数 userdata 用户自定义结构 ...
- CF #365 703D. Mishka and Interesting sum
题目描述 D. Mishka and Interesting sum的意思就是给出一个数组,以及若干询问,每次询问某个区间[L, R]之间所有出现过偶数次的数字的异或和. 这个东西乍看很像是经典问题, ...