项目中断断续续的用了下angular，也没狠下心 认真的学习。angular 特别是自定义指令这块 空白。

transclude 定义是否将当前元素的内容转移到模板中。看解释有点抽象。

看解释有点抽象Demo：

<!DOCTYPE html>

<html lang="en" ng-app='myApp'>

<head>

    <meta charset="UTF-8">

    <title>Angularjs</title>

    <script src="http://libs.useso.com/js/angular.js/1.2.5/angular.min.js"></script>

</head>

<body>

    <say-hello>美女</say-hello>

<script>

    var app = angular.module('myApp', []);

    app.directive('sayHello', function() {

        return {

            restrict: 'E',

            template: '<div>hello，<b ng-transclude></b><b ng-transclude></b></div>',

            replace: true,

            transclude: true

        };

    });

</script>

</body>

</html>

运行结果。

sayHello 标签之间 的文字 将会移动到 template里面的<b>标签中 理解成占位符。也可以叫乾坤大挪移。 这个还是很有用的，因为你定义的指令不可能老是那么简单，只有一个空标签。当你需要对指令中的内容进行处理时，此参数便大有可用。

参考：http://www.cnblogs.com/lvdabao/p/3391634.html

angular 自定义指令 directive transclude 理解的更多相关文章

  1. Angular自定义指令directive:scope属性

    在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...

  2. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. Angular自定义指令（directive）

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  4. Angular之指令Directive系列

    项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐Angualr实战学习视频大漠穷秋 Angular实战 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构 ...

  5. angularjs - 自定义指令(directive)

    自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...

  6. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  7. vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  8. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  9. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

随机推荐

  1. shell及脚本2——shell 环境及命令

    一.快捷键.通配符.特殊符号 1. 快捷键 CTRL+C:终止目前的命令 CTRL+D:输入结束,EOF CTRL+M:ENTER CTRL+S:暂停屏幕输出 CTRL+Q:恢复屏幕输出 CTRL+U ...

  2. php代码小实例

    php多图上传 <html> <meta http-equiv="Content-Type" content="text/html; charset=u ...

  3. bzoj1901

    1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 7218  Solved: 3000[Su ...

  4. 偷懒小工具 - SSO单点登录通用类（可跨域）

    写在前面的话 上次发布过一篇同样标题的文章.但是因为跨域方面做得不太理想.我进行了修改,并重新分享给大家. 如果这篇文章对您有所帮助,请您点击一下推荐.以便有动力分享出更多的"偷懒小工具&q ...

  5. codevs 2287 火车站

    2287 火车站  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond     题目描述 Description 火车从始发站(称为第1站)开出,在始发站上车的人 ...

  6. webApp开发

    1.Viewport:视口屏幕,可以操作的属性如下: width //viewport的宽度,范围从200-10000,默认为980像素 height //viewport的高度 initial-sc ...

  7. Redis常用命令(String数据类型)

    一.概述:      字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中 ...

  8. JS中SetTimeOut和SetInterval方法的区别？

    1.setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.由 ...

  9. sed awk 样例

    sed [options] '[action]' filename options: -n:一般sed命令会把所有数据都输出到屏幕,如果加入此选项,则只会把经过sed命令处理的行输出到屏幕. -e:允 ...

  10. 浅谈Android样式开发之shape

    引言 在Android开发中我们很多情况都是使用图片来展示相关效果,今天我就来详细介绍下Android下使用Shape来进行简单UI的开发.一方面这些是Android开发的基础,另一方面这方面的知识可 ...