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. 函数buf_page_get

    /**************************************************************//** NOTE! The following macros shoul ...

  2. 设计模式 - command

    将请求封装为对象,从而可以使用不同的请求对客户进行参数化,该模式的关键在于对不同请求的封装.简单的说,也就是在请求发出者和客户间通过command对象进行解耦,从而使得请求者可以通过实例化不同的com ...

  3. Thread: BooleanRT : Realtime 3D boolean operations for (Runtime,Editor)

    A Product by Mixed Dimensions What is BooleanRT? BooleanRT is a real-time 3D boolean operations exte ...

  4. 普通方式 分页【NOT IN】和【>】效率大PK 千万级别数据测试结果

    首现创建一张表,然后插入1000+万条数据,接下来进行测试. use TTgoif exists (select * from sysobjects where name='Tonge')drop t ...

  5. 架构版本与 NuGet 的版本不兼容 解决方案

    VS的NuGet管理在大大提高了开发效率,一直都在使用但今天在遇到了一个问题,引用一个所需要的NuGet包VS缺提示如下错误

  6. 怎么找到MyEclipse->add struts capabilities

    问:MyEclipse:我的工程右键可以MyEclipse->add struts capabilities之前有,后来不知怎么就没有了,谁知道怎么弄出来是struts 答:你已经add过一次了 ...

  7. svn版本控制-windows篇

    一.准备工作 1.获取 Subversion 服务器程序(服务端) 到官方网站(http://subversion.tigris.org/)下载最新的服务器安装程序.目前最新的是1.5版本,具体下载地 ...

  8. C++ ODR规则与dlopen 问题

    问题: 开发平台*.so插件的时候遇到相同的函数名称出现在不同的.so文件中,假设分别为a.so和b.so,b.so要使用a.so中的定义函数 a(),而在dlopen会先加载a.so然后加载b.so ...

  9. C/C++：原码、反码和补码

    正数的原码.反码和补码是一模一样的.   负数的反码的符号位跟原码一样,但其余各位取反. 负数的补码是其反码的最末位加1得到,即原码取反加1.   补码的补码就是原码.   浮点数的存储格式随着机器的 ...

  10. .net之单元测试

    一.单元测试的目的是为了提高项目的质量 二..net单元测试的实施步骤是:在已经创建的类文件的某个方法上右键-->选择创建单元测试-->系统会创建单元测试解决方案--->单元测试解决 ...