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 = $('
').attr('id', 'ContactList' + len);  li.append(dirctBuilder.build($compile, $scope));

注意：引入DirectiveUtil，調用build時傳入$compile和$scope。