AngularJS中写一个包裹HTML元素的directive
HTML 一个 元素 angularjs directive 中写 包裹
2023-09-11 14:16:51 时间
有这样的一个场景,这里有一个表单:
<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。
相关文章
- [译]HTML&CSS Lesson5: 定位
- html文件中引入css代码
- html打印表格每页都有的表头和打印分页
- HTML中拖放介绍
- 第六十四节,html文档布局元素
- HTML DOM print() 方法 ,html 打印
- HTML词法和语法
- 企业网站html框架
- [HTML 5] preventDefault() & defaultPrevented prop
- HTML 文字颜色代码
- 解决 Jenkins 中无法展示 HTML 样式的问题,csp问题,Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".
- k8s nfs使用示例:持久化nginx的/usr/share/nginx/html目录
- Html 语法学习笔记二
- 使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子
- HTML里的onfocus事件处理函数
- 一个简单的例子学习 HTML 元素property和attribute的区别
- 推荐一个markdown格式转html格式的开源JavaScript库
- HTML Email 编写指南
- 推荐一个markdown格式转html格式的开源JavaScript库
- 源于 Node.js的HTML 模板引擎Jade的一个hello world项目
- html页面和Chrome开发者工具elements界面不一致的一个可能原因:没有在Chrome开发者工具里打开对Shadow DOM显示的支持
- 两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
- ASP.NET MVC4 View层_Razor操作Html元素
- HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
- 如何在html中把一个图片或者表格覆盖在一张已有图片上的任意位置
- HTML网页制作——制作一个属于自己的网页
- html一个案例学会所有常用HTML(H5)标签
- 用HTML+CSS构建一个绚丽的登录页面