[AngularJS] Transclude -- using what existing in DOM to replace the template elements in directive
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的更多相关文章
- angularJS transclude
参考来源:彻底弄懂AngularJS中的transclusion 对以上文章进行摘录.总结和测试记录 在使用指令的时候,如果想要使用指令中的子元素,那么你就要用transclusion. 指令的DDO ...
- AngularJS快速入门指南10：DOM节点
AngularJS通过指令将application数据绑定到HTML DOM元素的属性上. ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到 ...
- angularjs transclude demo
<!doctype html> <html lang="en" ng-app="expanderModule"> <head> ...
- AngularJS如何给动态添加的DOM中绑定事件
正常情况(即非动态插入 DOM 对象)下,ng-click 这样的指令之所以有效(即点击之后能调用注册在可见作用域里的方法),是因为 angular 在 compiling phase(编译阶段)将宿 ...
- AngularJS transclude 理解及例子
一.概念理解 transclude可以在指令中让使用者自定义模板,也就是说,指令中模板的一部分,让指令的使用者动态指定:与指定中的Scope属性值为{}时候的作用类似,scope属性让指令使用者动态制 ...
- Angularjs学习笔记2_添加删除DOM元素
1.调用element方法 angular.element(html) 把字符串或dom对象转化成一JQuery对象, angular.element(document.getElementB ...
- AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- AngularJS指令封装高德地图组件
1 概述 公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图频繁的弹出广告,所以打算重新引用其它地图组件,最后决定基于AngularJ ...
- 摆脱DOM操作，从TodoMVC看angularJS
取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...
随机推荐
- ↗☻【HTML5秘籍 #BOOK#】第8章 使用CSS3
开发商前缀-moz- Firefox-webkit- Chrome和Safari-ms- Internet Explorer-o- Opera 伪类创造的交互性虽好,但已经有点过时了.主要问题是—太突 ...
- NoSql数据库使用半年后在设计上面的一些心得 (转)
http://www.cnblogs.com/AllenDang/p/3507821.html NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我 ...
- 嵌入式Linux启动过程中的问题积累
嵌入式Linux启动过程中的问题积累 Dongas 07-12-19 1.Bad Magic Number ## Booting image at 33000000 ... Bad Magic Num ...
- 多线程程序设计学习（8）Thread-Per-Message
Thread-Per-Message[这个工作交给你模式]一:Thread-Per-Message的参与者--->Client(委托人)--->host(中介开线程)--->hepl ...
- 【jQuery】jQuery操作<input>的聚焦与全选其内容
实现效果: 源代码: $(function() { $("#exist_code_remind").attr("style","display:non ...
- InnoDB关键特性之insert buffer
insert buffer 是InnoDB存储引擎所独有的功能.通过insert buffer,InnoDB存储引擎可以大幅度提高数据库中非唯一辅助索引的插入性能. 数据库对于自增主键值的插入是顺序的 ...
- 在.net中用Connection对象数据源的架构信息
可得到数据库中的,表,视图,等信息 string strcon = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source = " + fi ...
- FZU 2216 The Longest Straight 二分
0可以表示任何1到m的数,求一个最长的连续上升序列长度 因为m的范围在10w,所以以每个节点为起点 进行二分,复杂度mlogm 思路:b[i]表示到 1 到 i 有几个数没有出现,二分的时候注意加等号 ...
- 一个简单的appium脚本
这是一个简单的appium脚本,测试amazon购物过程的,过程包括搜索商品,然后从结果列表中选取中意的商品,然后加入购物车,等等. 它是一个最原始的脚本,对测试元素.数据.报告等未作任何的封装,后面 ...
- 配置OpenGL及第一个实例
Windows环境下安装GLUT的步骤:1.将下载的压缩包解开,将得到5个文件2.在“我的电脑”中搜索“gl.h”,并找到其所在文件夹(如果是VS,则应该是其安装目录下面的“VC\PlatformSD ...