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的更多相关文章

  1. 学习AngularJs:Directive指令用法（完整版）

    这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下   本教程使用AngularJs版本:1.5.3 AngularJs GitHub: http ...

  2. 学习AngularJs:Directive指令用法

    跟我学AngularJs:Directive指令用法解读(上) http://blog.csdn.net/evankaka/article/details/51232895 跟我学AngularJs: ...

  3. angularjs directive 实例 详解

    前面提到了angularjs的factory,service,provider,这个可以理解成php的model,这种model是不带html的,今天所说的directive,也可以理解成php的mo ...

  4. Angularjs directive全面解读（1.4.5）

    说到Angularjs directive即指令,可以这么说Angularjs的灵魂就是指令,学会Angularjs指令那么你的Angularjs的武功就修炼了一半了,当然这只是鄙人的一点点独到见解, ...

  5. angularjs directive (自定义标签解析)

    angularjs directive (自定义标签解析) 定义tpl <!-- 注意要有根标签 --> <div class="list list-inset" ...

  6. angularJS directive详解

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angul ...

  7. AngularJs directive 'transclude' option 详解

    transclude好像不是一个英语单词,有道词典里没有,百度翻译的意思是嵌入. transclude在angularjs的自定义的derective中是比较常见的一个东西,所有有必要要了解它. 我们 ...

  8. angularJS directive详解（自定义指令）

    Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...

  9. 50.AngularJs directive详解及示例代码

    转自:https://www.cnblogs.com/best/tag/Angular/ 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github ...

随机推荐

  1. hdu 5407 CRB and Candies（组合数+最小公倍数+素数表+逆元）2015 Multi-University Training Contest 10

    题意: 输入n,求c(n,0)到c(n,n)的所有组合数的最小公倍数. 输入: 首行输入整数t,表示共有t组测试样例. 每组测试样例包含一个正整数n(1<=n<=1e6). 输出: 输出结 ...

  2. Android功能模块化之生成验证码Bitmap

    Android生成验证码Bitmap,主要使用Canvas绘制,实现的步骤如下: 1.生成验证码.主要采用java的随机函数生成序号,然后对应获取预设的Char数组的值,生成长度固定的验证码: 2.C ...

  3. slidingmenu + fragment 左右菜单滑动

                           content_frame.xml <?xml version="1.0" encoding="utf-8" ...

  4. 联通光纤上网配置+华为HG8240光猫+TL-WR842N

    最近搬家改用北京联通宽带,光纤入户的那种.联通送的光猫是华为HG8240,没看到天线,应该是不带无线路由.然后自己再买了个TP-Link的TL-WR842N,用来组局域网,也供ipad.kindle. ...

  5. [CODEVS2603]公路修建

    题目描述 某国有n个城市,它们互相之间没有公路相通,因此交通十分不便.为解决这一“行路难”的问题,政府决定修建公路.修建公路的任务由各城市共同完成.    修建工程分若干轮完成.在每一轮中,每个城市选 ...

  6. 使用PPA在ubuntu上安装emacs

    使用PPA(Personal Package Archive)在ubuntu上安装emacs 1添加 PPA 到 apt repository 中:   $ sudo add-apt-reposito ...

  7. WeChat Official Account Admin Platform Message API Guide

    Keyword: WeChat Message API Text Image Location Link Event Music RichMedia Author: PondBay Studio[We ...

  8. Java-note-调试小技巧

    使用 Eclipse 调试 Java 程序的 10 个技巧 英文原文:Again! – 10 Tips on Java Debugging with Eclipse 你应该看过一些如<关于调试的 ...

  9. L0、L1与L2范数、核范数（转）

    L0.L1与L2范数.核范数 今天我们聊聊机器学习中出现的非常频繁的问题:过拟合与规则化.我们先简单的来理解下常用的L0.L1.L2和核范数规则化.最后聊下规则化项参数的选择问题.这里因为篇幅比较庞大 ...

  10. Dapper基础用法

    假如你喜欢原生的Sql语句,又喜欢ORM的简单,那你一定会喜欢上Dapper这款ROM.点击下载Dapper的优势:1,Dapper是一个轻型的ORM类.代码就一个SqlMapper.cs文件,编译后 ...