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. bzoj2757

    非常神的数位dp,我调了几乎一天首先和bzoj3131类似,乘积是可以预处理出来的,注意这里乘积有一个表示的技巧因为这里质因数只有2,3,5,7,所以我们可以表示成2^a*3^b*5^c*7^d,也就 ...

  2. 使用Unity3d的Physics.Raycast()的用法做子弹射击

    Class Functions 1)static function Raycast (origin : Vector3, direction : Vector3, distance : float = ...

  3. DTD约束文件

    在讲解DTD文件之前,我要说说一份合格的XML应该符合怎么样的规则? 就我总结一下几点,大家看看就好了: 1.一份XML有且仅有一个根元素. 2.XML是严格区分大小写的,<book>元素 ...

  4. jquery serialize()方法的扩展

    Jquery提供的序列化表单方法serialize方法确实方便,但是我在使用的时候发现了一个弊端:当我使用type:“post”进行ajax请求的时候, 这个时候参数data:$("#myf ...

  5. NOI2003 逃学的小孩

    这一题不会做啊…… 我觉得真要比赛的话我可能会随机上几万次,然后再用LCA求距离,更新最优值,等到快超时的时候输出答案…… 题解请看2007年陈瑜希论文 代码: ; type node=record ...

  6. LeetCode Intersection of Two Linked Lists （找交叉点）

    题意: 给两个链表,他们的后部分可能有公共点.请返回第一个公共节点的地址?若不重叠就返回null. 思路: 用时间O(n)和空间O(1)的做法.此题数据弱有些弱. 方法(1)假设两个链表A和B,用两个 ...

  7. SharePoint 2010 master page 控件介绍(1)

    转:http://blog.csdn.net/lgm97/article/details/6409204 以下所有的内容都是根据Randy Drisgill (MVP SharePoint Serve ...

  8. NopCommerce架构分析之四----插件机制

    NopCommerce支持灵活的插件机制,所谓Web系统插件,其实也就是可以像原系统的一部分一样使用. Web系统的使用方式就是客户端发送一个请求,服务端进行解析.在asp.net MVC中对客户请求 ...

  9. c#中单元测试

    从走进.net后发现每天有写不完的代码,有做不完的测试...人感觉都已经机械,我们需要认清自己调整好心态,问下自己是否真的喜欢编程.我的答案当然也就是我爱编码,编码给我带来了许多欢乐,每天都给我体验小 ...

  10. CodeForce---Educational Codeforces Round 3 The best Gift 解题报告

    对于这题笔者认为可以用数学排列来算,但是由于笔者很懒所以抄了一段大神的代码来交个大家了, 这位大神的基本想法就是通过记录各类书的数量,再暴力破解: 下面贴出这位大神的代码吧: #include< ...