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. BZOJ1954: Pku3764 The xor-longest Path

    题解: 在树上i到j的异或和可以直接转化为i到根的异或和^j到根的异或和. 所以我们把每个点到根的异或和处理出来放到trie里面,再把每个点放进去跑一遍即可. 代码: #include<cstd ...

  2. poj2406 周期

    脑残wa了一次 var s:ansistring; ans,i,k,m:longint; pre:..] of longint; function max(x,y:longint):longint; ...

  3. ehcache 分布式集群同步数据实例

    本文使用rmi方式,借鉴百度能搜到的文章,但是均不能做到数据同步,做了些改动完全没问题,更详细说明介绍百度即可.直奔主题,可运行的demo实例! 创建一个maven项目,配置pom pom.xml & ...

  4. I.MX6 Android Linux shell MMPF0100 i2c 设置数据

    #!/system/bin/busybox ash # # I.MX6 Android Linux shell MMPF0100 i2c 设置数据 # 说明: # 本文主要记录通过shell脚本来设置 ...

  5. 【转】FTS抓包看蓝牙的SDP整个过程

    原文网址:http://blog.sina.com.cn/s/blog_69b5d2a50101f23c.html 1.概述   SDP是蓝牙的Service Discovery Protocol,用 ...

  6. pattern目录

    pattern目录 1.创建型模式 JDK1.5枚举Singleton    单例模式 AbstractFactory  工厂方法模式    简单工厂模式 Builder Prototype 2.结构 ...

  7. 枚举类型的单例模式(java)

    Inspired by Effective Java. Singleton模式是在编程实践中应用最广泛的几种设计模式之一.以前知道的,实现单例的方法有两种(下面的A.B).刚刚在读<Effect ...

  8. NGINX(六)扩展

    前言 nginx模块化设计, 添加扩展模块变得容易, 下面开发一个非常简单的扩展模块, 实现返回http请求的头部内容, 配置标记是ping_pong, 配置在NGX_HTTP_LOC_CONF中. ...

  9. HDU4612 Warm up 边双（重边）缩点+树的直径

    题意:一个连通无向图,问你增加一条边后,让原图桥边最少 分析:先边双缩点,因为连通,所以消环变树,每一个树边都是桥,现在让你增加一条边,让桥变少(即形成环) 所以我们选择一条树上最长的路径,连接两端, ...

  10. Linux下复制粘贴快捷键

    1. 在控制台下:            1.1.鼠标选中要复制的文本,按鼠标中键,即为复制                              或者              1.2.复制命令 ...