项目中断断续续的用了下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. 基本组件的使用——UINavigationController

    作用:在多个ViewController中切换.UINavigationController内部以栈的形式维护一组ViewController, 因此,当导航进入一个新视图的时候,会以push的形式将 ...

  2. mybatis判断传入list大小

    <if test="tenantIds.size() > 0"> AND A.PROC_TARGET_ID IN <foreach collection=& ...

  3. 【hihoCoder 1454】【hiho挑战赛25】【坑】Rikka with Tree II

    http://hihocoder.com/problemset/problem/1454 调了好长时间,谜之WA... 等我以后学好dp再来看为什么吧,先弃坑(╯‵□′)╯︵┻━┻ #include& ...

  4. 装X代码

    装X代码 http://hackcode.ishoulu.com/scp/ http://hackcode.ishoulu.com/umbrella/ http://hackcode.ishoulu. ...

  5. OAuth2.0相关知识

    自己总结的可能有误差. 大致分为6个步骤: 1.注册相关应用,获取client_id,client_secret.2.第三方请求用户授权.用户点击按钮同意授权后,授权服务器将生成一个用户凭证(code ...

  6. 神经网络与深度学习（3）：Backpropagation算法

    本文总结自<Neural Networks and Deep Learning>第2章的部分内容. Backpropagation算法 Backpropagation核心解决的问题: ∂C ...

  7. CodeForces - 662A Gambling Nim

    http://codeforces.com/problemset/problem/662/A 题目大意: 给定n(n <= 500000)张卡片,每张卡片的两个面都写有数字,每个面都有0.5的概 ...

  8. C#的接口

    什么是接口?其实,接口简单理解就是一种约定,使得实现接口的类或结构在形式上保持一致.个人觉得,使用接口可以使程序更加清晰和条理化,这就是接口的好处,但并不是所有的编程语言都支持接口,C#是支持接口的. ...

  9. codevs 2287 火车站

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

  10. Github上的Watch和 Star的区别

    Github 推出了新的 Notification 系统,更改了原有的 Watch 机制,为代码库增加了 Star 操作.Notification 将接收 Watching 代码库的动态,包括:* I ...