[AngularJS] Directive with Transcluded Elements
Create a wrapWith
directive using advanced transclusion techniques.
transclude
- compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.
true
- transclude the content of the directive. (replace the whole stuff)
'element'
- transclude the whole element including any directives defined at lower priority. (append to the dom)
See more: http://www.cnblogs.com/Answer1215/p/3932450.html
<!DOCTYPE html>
<html>
<head>
<title>Egghead.io</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
</head>
<body ng-app="egghead" ng-controller="AppCtrl as app"> <cg-form wrap-with="well"></cg-form> <!-- get all the template from directive put into well template -->
<cg-form wrap-with="red"></cg-form> <!-- get all the template from directive put into red template -->
<script id="form-info" type="text/ng-template"> <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </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> <script src="bower_components/angular/angular.min.js"></script> <script src="app.js"></script> </body> </html>
var egghead = angular.module("egghead", []); egghead.controller("AppCtrl", function () {
var app = this; app.people = [{"firstName":"Sonia","lastName":"Hodges"},{"firstName":"Benedict","lastName":"Morrow"},{"firstName":"Keegan","lastName":"Fields"},{"firstName":"Jade","lastName":"Martinez"},{"firstName":"Jaquelyn","lastName":"Suarez"},{"firstName":"Leo","lastName":"Hughes"},{"firstName":"Skyler","lastName":"Sharp"},{"firstName":"Genevieve","lastName":"Villarreal"},{"firstName":"Beau","lastName":"Hendrix"},{"firstName":"Lara","lastName":"Howard"},{"firstName":"Jonah","lastName":"Crawford"},{"firstName":"Kendall","lastName":"Lane"},{"firstName":"Kimberly","lastName":"Mcclain"},{"firstName":"Ingrid","lastName":"Salinas"},{"firstName":"Moses","lastName":"Mcpherson"},{"firstName":"Britanney","lastName":"Sweeney"},{"firstName":"Patricia","lastName":"Perez"},{"firstName":"Roth","lastName":"Heath"},{"firstName":"Nora","lastName":"Osborne"},{"firstName":"Giacomo","lastName":"Shepard"}]
}); egghead.directive("wrapWith", function ($templateCache) {
return {
transclude: 'element',
link: function (scope, element, attrs, ctrl, transclude) {
var template = $templateCache.get(attrs.wrapWith);
console.log(template); var templateElement = angular.element(template); console.log(element); transclude(scope, function (clone) {
element.after(templateElement.append(clone));
})
}
}
}); egghead.directive("cgForm", function ($templateCache) {
return {
restrict: "EA",
templateUrl: "form-info"
}
});
result:
[AngularJS] Directive with Transcluded Elements的更多相关文章
- 学习AngularJs:Directive指令用法(完整版)
这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...
- 学习AngularJs:Directive指令用法
跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...
- angularjs directive 实例 详解
前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...
- Angularjs directive全面解读(1.4.5)
说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...
- angularjs directive (自定义标签解析)
angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...
- angularJS directive详解
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...
- AngularJs directive 'transclude' option 详解
transclude好像不是一个英语单词,有道词典里没有,百度翻译的意思是嵌入. transclude在angularjs的自定义的derective中是比较常见的一个东西,所有有必要要了解它. 我们 ...
- angularJS directive详解(自定义指令)
Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...
- 50.AngularJs directive详解及示例代码
转自:https://www.cnblogs.com/best/tag/Angular/ 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github ...
随机推荐
- [转] WinForm自定义函数FindControl实现按名称查找控件
原文地址 WinForm自定义函数FindControl实现按名称查找控件 本文所述实例实现WinForm自定义函数FindControl实现按名称查找控件的功能,在C#程序开发中有一定的实用价值. ...
- Metaspace 之一--java8 去掉 perm 用 Metaspace 来替代
正如大家所知,JDK 8 Early Access版已经提供下载.这使开发者可以体验Java8的新特性.其中之一,是Oracle从JDK7发布以来就一直宣称的要完全移除永久代空间.例如,字符串内部池, ...
- 【LeetCode 169】Majority Element
Given an array of size n, find the majority element. The majority element is the element that appear ...
- 重新安装Photoshop CS6以后启动软件出现Licensing for this product has expired
当我们卸载试用版本Photoshop CS6并且重新安装,出现Licensing for this product has expired,并且无法打开软件,这是由于证书过期导致的,解决办法是将计算机 ...
- 通过库函数API和C代码中嵌入汇编代码剖析系统调用的工作机制
作者:吴乐 山东师范大学<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 本次实验的主要内容就是分别采用A ...
- webpack入门级教程
Webpack是什么 首先可以看下官方文档,文档是最好的老师. 这里也有国外的一个朋友写的入门介绍. Webpack是由Tobias Koppers开发的一个开源前端模块构建工具.它的基本功能是将以模 ...
- Windows Azure 不能ping通的解决方案
Windows Azure 不能ping通如何解决? 为了避免Ping Flood攻击,Windows Azure不开放对外ICMP通讯协定,所以使用ping命令我们是无法ping通的.在微软资料中心 ...
- 【Spark学习】Apache Spark配置
Spark版本:1.1.1 本文系从官方文档翻译而来,转载请尊重译者的工作,注明以下链接: http://www.cnblogs.com/zhangningbo/p/4137969.html Spar ...
- 视频资源下载方法[download video resources]
笔者做视频时钟分析,需要用到大量特殊的视频,如何获取需要的视频是一个问题? 以下载NBA视频为例: Tools:①腾讯视频软件 (自行下载) ②批处理文件(下文会给出代码) convert.bat ...
- MEAN Stack:创建RESTful web service
本文在个人博客上的地址为URL,欢迎品尝. 前段时间做了DTREE项目中的前后端数据存储功能,在原有的ngController上进行HTTP请求,后端接受到请求后再存储到mongoDB上.现将学习所得 ...