项目中断断续续的用了下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. PM成长之路（一）

    到底什么样的人适合任项目经理一直是很多企业的困惑,因为大家发现优秀项目经理的特质看起来和传统的职能经理或技术专家很不一样.当企业在决定开展一个重大的项目时,如果不能找到一个适合带领和管理项目的项目经理 ...

  2. win7下安装mysql后修改密码

    mysql的安装教程网上很多,此处不过多介绍,个人觉得下面这篇教程是比较好的,一步到位.MySQL 5.7.9 ZIP 免安装版本配置过程_百度经验  http://jingyan.baidu.com ...

  3. Android 横竖屏+碎片的应用

    最终效果展示: 项目介绍: 通过碎片的方式显示标题列表和内容,其中也牵涉到横竖屏的知识 项目代码下载:http://files.cnblogs.com/files/Laopengblog/%E7%A2 ...

  4. VS2015中SharedProject与可移植类库（PCL）项目

    转自:http://www.tuicool.com/articles/beaMZv3 今天闲里偷空看了点Connect大会的视频,C# 6.0的新语法.EF7的支持非关系型数据库.Windows商店应 ...

  5. codeforces754D Fedor and coupons

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  6. CentOS 6/7安装ffmpeg

    环境 CentOS 6/7 安装 导入GPG key rpm --import http://packages.atrpms.net/RPM-GPG-KEY.atrpms 安装ATRPMS Repo ...

  7. coreseek操作

    开启服务$  /usr/local/coreseek/bin/searchd -c /usr/local/coreseek/etc/csft.conf 重新索引: /usr/local/coresee ...

  8. 室内定位系列（一）——WiFi位置指纹（译）

    原文:<Advanced Location-Based Technologies and Services>--chapter 2 WiFi Location Fingerprint 作者 ...

  9. PHP框架模板原理

           PHP框架现在是一种很流行的东西了,很多朋友开发应用与网站都会选择一个PHP框架或模板了,下面我们来看看PHP框架是如何实现的吧. 本文主要来聊聊框架理论,但不针对任何一款框架,不过任何 ...

  10. 用uniq来处理文件重复数据--交集，差集，计数等(转)

    经常有这样的需求:两个文本文件要求取重复的行或只取不重复的,简单的情况下用sort和uniq来处理是非常方便的: 利用现存两个文件,生成一个新的文件 取出两个文件的并集(重复的行只保留一份) 取出两个 ...