码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS clone directive 指令复制

时间:2014-12-21 18:03:41      阅读:399      评论:0      收藏:0      [点我收藏+]

标签:angularjs   diretive   angularjs 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 指令复制

标签:angularjs   diretive   angularjs directive   指令复制   指令克隆   

原文地址:http://blog.csdn.net/hai8902882/article/details/42061307

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!