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. js标点符号全局匹配

    var modelCode = node.modelCode.replace(/\./g, '\_'); 注意后面的  "\" <script language=" ...

  2. innodb master主线程

    http://wenku.baidu.com/link?url=MhY9yhHTgeOlyooWDvaVfPkW3cuVSX_rIZv2QtCu7GLeEuqSfYh_M7Yvl1N4IY08a3ws ...

  3. php简单实现MVC

    在PHP中使用MVC越来越流行了,特别是在一些开源的框架当中.MVC足以应对大多数的情况,但还有一些情况是其不太适合的,如比较简单的个人博客,对于只有几百篇文章量级的博客,使用MVC让人觉得有些太复杂 ...

  4. x86、i386、i486、i586、i686和x86_64

    1.386与686 i386—几乎所有的X86平台,不论是旧的pentum或者是新的pentum-IV与K7系统CPU,都可以正常工作,i指得是Intel兼容的CPU,至于386就是CPU的等级.i5 ...

  5. Self-Paced Training (1) - Introduction to Docker

    helloworld: wget -qo- https://get.docker.com/ | sh sudo docker run hello-world sudo usermod -aG dock ...

  6. [转] 字符串模式匹配算法——BM、Horspool、Sunday、KMP、KR、AC算法一网打尽

    字符串模式匹配算法——BM.Horspool.Sunday.KMP.KR.AC算法一网打尽 转载自:http://dsqiu.iteye.com/blog/1700312 本文内容框架: §1 Boy ...

  7. java惯用法转载

    目录 实现: equals() hashCode() compareTo() clone() 应用: StringBuilder/StringBuffer Random.nextInt(int) It ...

  8. (十一)学习CSS之float属性

    参考:http://www.w3school.com.cn/cssref/pr_class_float.asp 定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕 ...

  9. ASP.NET MVC中默认Model Binder绑定Action参数为List、Dictionary等集合的实例

    在实际的ASP.NET mvc项目开发中,有时会遇到一个参数是一个List.Dictionary等集合类型的情况,默认的情况ASP.NET MVC框架是怎么为我们绑定ASP.NET MVC的Actio ...

  10. 在.net中用Connection对象数据源的架构信息

    可得到数据库中的,表,视图,等信息   string strcon = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + fi ...