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. Archlinux里面安装VMware Tools

    用虚拟机学习linux确实很方便,但是和主机的文件共享是个大问题,VMWARE TOOLS可以很好的解决这个问题,但是在ARCH里却不能向大多数linux那样方便的安装,在查了很多帖子试了无数遍之后, ...

  2. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  3. (六)学习MVC之标签a提交页面

    标签<a>如何做到与<input type="submit"/>一样有提交页面信息的效果? @using (Html.BeginForm("Log ...

  4. [转] Symbol对象

    GIS中的离散实体有三种:点.线.面,在ArcEngine中用三种符号对应表示,分别是:MarkSymbol.LineSymbol和FillSymbol.此外还有TextSymbol用于文字标注,3D ...

  5. Today I Cooked the Sun Yat-Sen University [2007-09-25 12:37:39]

    Aha,yes,it is! And I paticipate in the school page of sysu...and cann't change my previous csu to sy ...

  6. spring的三种注入方式

    接口注入(不推荐) 构造器注入(死的应用) getter,setter方式注入(比较常用) Type1 接口注入 我们常常借助接口来将调用者与实现者分离.如: public class ClassA  ...

  7. C#操作Json(转)

    原文:http://wenku.baidu.com/link?url=3dlqKdF26ZdQIAcX9jvP2ZYEtl3J0sKOV8XuHQI0Rz4SjB9S46nqmGiMXUVQa_1Pm ...

  8. class0513(html基础加强2）

    使用VS创建网页 新建Web项目(新建→ASP.Net Web应用程序),新建html页面(添加→新建项→Web→HTML页) 查看页面的方式: 切换到“设计”视图,可以在这里查看初步的预览效果,不是 ...

  9. C语言基础--宏

    宏在C语言中经常使用,在linux的源码中可以看到很多宏的高级应用.因此不理解宏,就很难理解代码.本文参考一些互联网资料做一些总结,希望给大家带来帮助. 先说说使用宏的优点及缺点: 优点: 1.提高代 ...

  10. ios开发中，A valid provisioning profile for this executable was not found，的解决方法

    手头上的一个ios项目在上架后,再进行时出现了以上的这个错误,这是上架后忘了对一些配置进行复原 我的项目解决方法是: 是上面的这一块出现了问题,图片上的配置是正常的情况,但是上架的时候对其进行了修改, ...