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。

时间: 2024-11-16 05:27:13

AngularJS clone directive 指令复制的相关文章

angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)

angular js 中模板的使用,事件绑定以及指令与指令之间的交互 对应教学视频地址(需翻墙):angularjs教学视频 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="ShieldController"> <div&g

【angularJS】Directive指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 AngularJS 应用程序的 根元素. 2.ng-init 指令初始化应用程序数据. 通常情况下,不使用 ng-init.您将使用一个控制器或模块来代替它. 3.ng-model 指令把元素值(比如输入域的值)绑定到应用程序[一般是在控制器中定义的变量]. 4.ng-repeat 指令会重复一个 H

AngularJS中Directive指令系列 - bindToController属性的使用

默认false.这个属性用来绑定scope的属性直接赋给controller.可以为true或者和scope相同格式的对象. 此外使用此属性,要设置controller的别名,通常通过"controllerAs"来设置. 如果一个directive里同时使用了bindToController和scope,并且是object.那么bindToController会覆盖scope.

学习AngularJs:Directive指令用法(完整版)

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

跟我学AngularJs:Directive指令用法解读(下)

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记 AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义. 完整的AngularJS指令参数 angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名规则,使用时采用'-'连接单词 return { restrict : String in ['E'

跟我学AngularJs:Directive指令用法解读(上)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要: Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性

带你走近AngularJS - 创建自定义指令

为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架. 目前有很多JavaScript 产品提供插件给Web开发人员.例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包.但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript 模式来写 jQuery

[转]你知道用AngularJs怎么定义指令吗?--很详细

前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令