AngularJS中写一个包裹HTML元素的directive
有这样的一个场景,这里有一个表单:
<form role="form">
...
</form>
我们希望在form的外层动态包裹上一层。
有可能是这样:
<div id="well">
<form role="form">
...
</form>
</div>
也有可能是这样:
<div id="red">
<form role="form">
...
</form>
</div>
动态的div放在那里呢?
--放在<script id="well" type="text/ng-template"></script>和<script id="red" type="text/ng-template"></script>里面,就像如下:
<script id="well" type="text/ng-template">
<div class="well"></div>
</script> <script id="red" type="text/ng-template">
<div style="color:red"></div>
</script>
动态div如何包裹到form上呢?
--通过<form role="form" wrap-with="red">或<form role="well" wrap-with="red">
所以我们要写一个名称为wrapWith的directive.
var app = angular.module("app",[]); app.controller("AppCtrl", function(){
var app = this;
app.people = [
{"firstName":"", "lastName":""},
...
];
}); app.directive("wrapWith", function($templateCache){
return {
transclude: 'element',
link: function(scope, element, attrs, ctrl, transclude){
//获取模版内容
var template = $templateCache.get(attrs.wrapWith);
//把模版内容转换成angular元素
var templateElement = angular.element(template); transclude(scope, function(clone){
//clone,在这里是表单form
element.after(templateElement.append(clone));
})
}
}
})
以上,通过$templateCache可以获取到<script id="well" type="text/ng-template"></script>中的内容,然后通过angular.element转换成angular元素,最后使用link函数的transclude把form追加到模版后面。另外,transclude的属性值要设置成element。
AngularJS中写一个包裹HTML元素的directive的更多相关文章
- 【Filter 不登陆无法访问】web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面的功能
在web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面,而重定向到登陆界面的功能. 项目是用springMVC+spring+hibernate实现 (和这个没有多大关系) 第一步: 首先 ...
- AngularJs中,如何在父元素中调用子元素为自定义Directive中定义的函数?
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- 在vue中写一个跟着鼠标跑的div,div里面动态显示数据
1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...
- 在React中写一个Animation组件,为组件进入和离开加上动画/过度
问题 在单页面应用中,我们经常需要给路由的切换或者元素的挂载和卸载加上过渡效果,为这么一个小功能引入第三方框架,实在有点小纠结.不如自己封装. 思路 原理 以进入时opacity: 0 --> ...
- vue : 在vuex里写一个数组首尾元素互换的方法
不着急上代码,先想几个问题. vuex里怎么写方法? mutation里写vuex方法,组件中用commit调用. 数组首尾元素怎么互换? arr.splice(0, 0, arr[arr.lengt ...
- 在AngularJS中实现一个延迟加载的Directive
所谓的延迟加载通常是:直到用户交互时才加载.如何实现延迟加载呢? 需要搞清楚三个方面: 1.html元素的哪个属性需要延迟加载?2.需要对数据源的哪个字段进行延迟加载?3.通过什么事件来触发延迟加载? ...
- .net 在数据访问层中写一个DBhelper优化类
复习了在学校的时候做的WinForm端的一个学生信息管理系统,用的三层架构,看了一下里面的数据优化类 这个类是用来把对数据库的操作封装成静态方法,增删改查的时候直接调用这个类,减少项目里代码的冗余和方 ...
- Python 中写一个装饰器实现限制频率访问
1.思路: 首先要在装饰器中确定访问的方法名, 第一次可以访问成功,之后要在规定的时间(变量)之后才可以访问. 初始应该有一个变量为0;访问成功之后把当前的时间赋值给这个变零. 这样再次访问时把当前的 ...
- WPF在后台中写一个鼠标移入移出的操作
在这个问题上我纠结了好久就是为了一个问题就是forebackground这个属性 lblPwd.Foreground = Brushes.Black;我以前一直以为是fontground这个属性可是我 ...
随机推荐
- 解决报错SAXNotRecognizedException: Feature 'http://javax.xml.XMLConstants/feature/secure-processing' not recognized
今天调试appium脚本,发现运行脚本就报错 SAXNotRecognizedException: Feature 'http://javax.xml.XMLConstants/feature/sec ...
- urllib处理包的简单使用
我们可以使用urllib.request.urlopen()这个接口函数就可以打开一个网站,读取打印信息 你可以现在终端使用python from urllib import request if _ ...
- PYTHON-模块-time&datetime-练习 +目录规范
# 作业# 1.请写出规范目录# 并解释各文件夹的作用bin 可执行文件conf 配置文件core 主要业务逻辑db 数据文件lib 库(公共代码 第三方模块)log 日志文件 # 2.改造atm + ...
- sql in语句
转自http://www.1keydata.com/cn/sql/sql-in.php 在 SQL 中,在两个情况下会用到 IN 这个指令:这一页将介绍其中之一 -- 与 WHERE 有关的那一个情况 ...
- C++ code:数值计算之矩形法求解积分问题
积分的通常方法是将区域切割成一个个的小矩形,然后求这些小矩形的和.小矩形切割得越细,计算精度就越高,可以将切割小矩形的数量作为循环迭代变量,将前后两个不同精度下的小矩形和之差,作为逼近是否达到要求的比 ...
- python接口自动化测试八:更新Cookies、session保持会话
s = requests.session() # 此方法只适用于网站是cookies这种,网站是token的没用 # 这样做的好处就是可以保存cookies并保持会话,不用每次都去获取.传参 Toke ...
- ERP产品销售发货判断库存功能(四十二)
产品数量的前端(键盘抬起的事件): <td> <input type="text" name="proCount" onkeyup=" ...
- jquery追加元素的不同语法
问题 项目中越来越多的地方需要实现无刷新来更新页面局部内容,使用ajax从后台获取数据然后追加到页面中.那么怎么获取数据之后如何实现元素的追加呢? 解决 jQuery提供追加元素函数,掌握常用的四种追 ...
- k8s 使用详解
转自:https://www.cnblogs.com/gaoyuechen/p/8685771.html
- mysql_union操作符
MySQL UNION操作符 union操作符合并两个或多个 SELECT 语句的结果集. union:去重 union all:不去重 UNION 结果集中的列名总是等于 UNION 中第一个 S ...