首页 > 代码库 > AngularJS clone directive 指令复制
AngularJS clone directive 指令复制
需求背景:
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 clone directive 指令复制
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。