AngularJS clone directive 指令复制
2016-03-13 21:01
676 查看
需求背景:
directive模块化某表单信息,但表单信息可加入多条。此时就涉及到clone directive.解决方式:
能够通过使用angularjs中$compile来进行clone directive。clone direcitve中常涉及到数据的绑定。详细方法:
tw.factory('DirectiveUtil', [function() { var DirectiveUtil = {}; DirectiveUtil.DirectiveBuilder = function(directiveName) { directive = directiveName; directiveBuffer = '<' + directiveName + ' '; this.setDirectiveName = function(directiveName) { directive = directiveName; directiveBuffer = '<' + directiveName + ' '; } this.getDirectiveName = function() { return directive; } // name: directive中scope的name, value: clone directive操作时,数据绑定的名称 this.appendAttr = function(name, value) { directiveBuffer += name + '=\'' + value + '\' '; return this; } this.build = function(compile, scope) { return compile(directiveBuffer + ' />')(scope); } }; return DirectiveUtil; }]);
使用方式:
var dirctBuilder = new DirectiveUtil.DirectiveBuilder('tw-contact-form'); dirctBuilder.appendAttr('is-new', 'isNew') // $scope.isNew, $scope.showAddBtn, $scope.initData .appendAttr('show-add-btn', 'showAddBtn') .appendAttr('init-data', 'initData'); var li = $('<li></li>').attr('id', 'ContactList' + len); li.append(dirctBuilder.build($compile, $scope));
注意:引入DirectiveUtil,调用build时传入$compile和$scope。
相关文章推荐
- angularJS 常用插件指令
- 一个基于angularJS的工资计算器
- Angularjs 路由之初识
- POJ1948 Triangular Pastures(01背包)
- 简介AngularJS中使用factory和service的方法
- Java B/S系统的颠覆开发Google AngularJs
- angular 语法笔记
- AngularJS最佳实践
- AngularJs的post传递参数action接不到
- Angular2 进阶
- AngularJS分别RequireJS做文件合并压缩的那些坑
- 欧拉项目第12题 Highly divisible triangular number
- 详解Angularjs中的依赖注入
- 【一起学AngularJS】第七章、XHRs和依赖注入
- 详解AngularJS过滤器的使用
- AngularJS学习(MVVM框架入门)
- Angularjs中使用Filters详解
- 简单介绍AngularJs Filters
- 简单介绍AngularJs Filters
- 简单介绍AngularJs Filters