项目中断断续续的用了下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. python基础-软件目录结构规范

    一.定义目录结构目的 可读性高: 不熟悉这个项目的代码的人,一眼就能看懂目录结构,知道程序启动脚本是哪个,测试目录在哪儿,配置文件在哪儿等等.从而非常快速的了解这个项目. 可维护性高: 定义好组织规则 ...

  2. 庆祝下，提交了第一个ceph pull request。实现了从0到1的突破

    庆祝一下!经过社区老司机的带路,昨天提交了第一个ceph pull request.实现了从0到1的突破,希望再接再厉提交更多代码到社区,为社区发展贡献一点自己力量. 提交的第一个被社区fix的bug ...

  3. sql中 truncate 、delete与drop区别

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...

  4. Android 开源框架Universal-Image-Loader学习

    Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用 Android 开源框架Universal-Image-Loader完全解析(二)--- 图片 ...

  5. [翻译] V8引擎的解析

    原文:Parsing in V8 explained 本文档介绍了 V8 引擎是如何解析 JavaScript 源代码的,以及我们将改进它的计划. 动机 我们有个解析器和一个更快的预解析器(~2x), ...

  6. java编码

    /**     * @Comments:default:ISO-8859-1 -> UTF-8 乱码则转码     * @param: str(乱码字符),coding(default:ISO- ...

  7. Binary Agents

    FCC题目: 传入二进制字符串,翻译成英语句子并返回. 二进制字符串是以空格分隔的. 示例: binaryAgent("01000001 01110010 01100101 01101110 ...

  8. Bzoj1076 [SCOI2008]奖励关

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1935  Solved: 1053 Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一 ...

  9. 放弃火狐，选择chrome

    最近公司笔记本电脑经常卡的不行(win10系统),先是硬盘经常占用99%-100%,改系统设置,软件优化,硬件测试...尝试了能搜索到所有办法后,还是没有解决,换成win7后感觉稍微好点了(心理作用? ...

  10. maven上传jar到nexus本地仓库

    一.nexus新增本地仓库 Hosted Repository:本地仓库,部署组织内部的版本内容 Proxy Repository:代理仓库,代理远程的公共仓库,如maven中央仓库 Virtual ...