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框架整理

    1. Dojo (演示地址) Dojo是一个强大的面向对象JavaScript框架.主要由三大模块组成:Core.Dijit.DojoX.Core提供ajax,events,packaging,CSS ...

  2. Collection Of SVM Libraries By Language via datasciencecentral

    http://www.datasciencecentral.com/profiles/blogs/collection-of-svm-libraries-by-language Support vec ...

  3. 【Android】Android ListViewAnimations分析

    使用:https://github.com/android-cn/android-open-project-demo/tree/master/listview-animations-demo APK例 ...

  4. tdx api z

    调用TdxAPI.dll函数 .DLL命令 TdxInit, 逻辑型, "TdxApi.dll", "TdxInit", , 初始化通达信实例,成功时返回tru ...

  5. （一）NUnit单元测试心得

    由于各种缘由,一本<.Net单元测试艺术>突然出现在了我的办公桌上,于是我的单元测试之路就此开始.通过一两个月不间断的学习,以及不断结合具体的项目做开发,再结合书上的知识对单元测试有了一些 ...

  6. 设计模式_Mediator_调停者模式

    形象例子: 四个MM打麻将,相互之间谁应该给谁多少钱算不清楚了,幸亏当时我在旁边,按照各自的筹码数算钱,赚了钱的从我这里拿,赔了钱的也付给我,一切就OK啦,俺得到了四个MM的电话.调停者模式: 调停者 ...

  7. MMU(why)

    在ARM中,MMU几个主要作用: 1. I/D Cache 管理      -> 大幅提高代码运行效率. 2. PA/VA 重映射        -> 实现多进程内存空间映射. 3. 内存 ...

  8. 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇03：暂停游戏》

    3.暂停游戏 暂停游戏概述: 在游戏进行时,玩家有可能会遇到多种突发事件.在跑酷游戏中突发状况的发生对游戏的影响更甚,游戏进行时玩家死亡,游戏只能从头开始,那么如果因为外界因素而影响游戏的进行,显然是 ...

  9. Spark系列(三)SparkContext分析

    SparkContext初始化流程图 其它说明: 在createTaskScheduler会根据不同的提交模式创建backend对象(如本地模式为LocalBackend). 在SparkDeploy ...

  10. C++中的虚函数解析[The explanation for virtual function of CPlusPlus]

    1.什么是虚函数?                                                                                            ...