var app = angular.module("phoneApp", []);

app.controller("AppCtrl", function($scope) {

});

app.directive("panel", function() {

    return {

        restrict: "E",

        transclude: true,

        template: '<div class="panel" ng-transclude>This is a panel component</div>'

    }

})
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Angular Scope &</title>

    <link href="foundation.min.css" rel="stylesheet"/>

    <script src="angular.min.js"></script>

    <script src="app.js"></script>

</head>

<body >

<div ng-app="phoneApp">

    <div ng-controller="AppCtrl">

        <panel>

            <div class="button">Click me!</div>

        </panel>

    </div>

</div>

</body>

</html>

[AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive的更多相关文章

  1. angularJS transclude

    参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...

  2. AngularJS快速入门指南10：DOM节点

    AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...

  3. angularjs transclude demo

    <!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...

  4. AngularJS如何给动态添加的DOM中绑定事件

    正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿 ...

  5. AngularJS transclude 理解及例子

    一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...

  6. Angularjs学习笔记2_添加删除DOM元素

    1.调用element方法     angular.element(html) 把字符串或dom对象转化成一JQuery对象, angular.element(document.getElementB ...

  7. AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  8. AngularJS指令封装高德地图组件

    1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...

  9. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

随机推荐

  1. bzoj3774

    这算是最小割中比较难的吧 看到选取显然最小割 看到上下左右四个点我感觉肯定和染色相关 注意每个点的收益获得条件是[或],因此我们考虑拆点i', i,分别表示通过四周控制和控制本身的代价 连边s--&g ...

  2. [CF 471C] MUH and House of Cards

    C. MUH and House of Cards   Polar bears Menshykov and Uslada from the zoo of St. Petersburg and elep ...

  3. ZOJ 2760 How Many Shortest Path (不相交的最短路径个数)

    [题意]给定一个N(N<=100)个节点的有向图,求不相交的最短路径个数(两条路径没有公共边). [思路]先用Floyd求出最短路,把最短路上的边加到网络流中,这样就保证了从s->t的一个 ...

  4. Spring 教程（二）

    一.Spring AOP介绍 开发其实就是在不断的重构,抽象重复代码,然后进行封装.从最原始的模块化编程到面向对象编程,代码的封装越来越整齐清晰,但是依然存在重复的代码,而这些重复代码几乎都是与业务逻 ...

  5. hbase分页查询

    为了广大技术爱好者学习netty,在这里帮新浪微博@nettying宣传下他出版的新书 <netty权威指南>@nettying兄在华为NIO实践多年,这本书是他的技术和经验的一个结晶.N ...

  6. Ofbiz 10.04 + eclipse 安装与配置

    1.下载 ofbiz 10.04:http://ofbiz.apache.org/download.html: 2.下载 freemarker-2.3.15 eclipse 插件(FreeMarker ...

  7. 移动端混合型App（hybrid app）自动化测试选型与实践

    背景 公司产品的业务已经发展到了移动端,开发选型已经结束,决定使用phonegap做移动端的web应用开发平台.考虑到业务的复杂与多样,移动端的测试同样需要自动化.在网上看了很多,最终锁定了3个移动端 ...

  8. SSDT Hook结构

    目录 SSDT Hook效果图 SSDT简介 SSDT结构 SSDT HOOK原理 Hook前准备 如何获得SSDT中函数的地址呢 SSDT Hook流程 SSDT Hook实现进程保护 Ring3与 ...

  9. 设计一个简单的，低耗的能够区分红酒和白酒的感知器（sensor）

    学习using weka in your javacode 主要学习两个部分的代码:1.过滤数据集 2 使用J48决策树进行分类.下面的例子没有对数据集进行分割,完全使用训练集作为测试集,所以不符合数 ...

  10. tRNAscan-SE

    tRNAscan-SE是一款可以在基因组上扫描tRNA的序列,也就是说你给定一组基因序列(fasta数据格式),可以用这个软件去预测这个序列是不是tRNA.具体的实现原理,我不搞生物,所以也就不太明白 ...