项目中断断续续的用了下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. Redis 常用操作

    import org.junit.Before;import org.junit.Test;import redis.clients.jedis.Jedis;import java.util.Set; ...

  2. android studio 提示翻译

    1. you can import your settings from a previous version of Studio可以导入您的设置从先前版本的工作室 2. I want to impo ...

  3. 解决UINavigationController在pushViewController时出现的"卡顿"问题

    进行开发中,遇到了个小问题: 在使用UINavigationController的-pushViewController:animated:执行入栈一个子控制器操作时(即最新栈顶子控制器),会出现推出 ...

  4. 关于input的file框onchange事件触发一次失效的新的解决方法

    在google了众多方法后,网上有这么几种方法: 1.替换掉原来的input框 2.remove原来的input框,然后在添加进新的一样的input框 但是不知道为什么非常不幸的是,怎么弄我都弄不出. ...

  5. bzoj3181: [Coci2012]BROJ

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  6. 通过实现System.IComparable接口的CompareTo方法对两个类进行比较

    假设现在有一个学生类 class Student { int age; public Student(int age) { this.age = age; } } 要使学生类之间能进行比较,实现Sys ...

  7. PHP进程通信基础——信号

    PHP进程通信基础--信号 使用信号通信.可以使用kill -l 来查看当前系统的信号类型. 每个信号所代表的的详细含义,请查看我的这篇博客:http://www.cnblogs.com/roverl ...

  8. vue 组建实现数据的双向绑定

    <!DOCTYPE html><html><head> <style>body {  font-family: Helvetica Neue, Aria ...

  9. 移动web页面前端开发总结

    移动web在当今的发展速度是一日千里,作为移动领域的门外汉,在这段时间的接触后,发现前端开发这一块做一个小小的总结. 1.四大浏览器内核 1.Trident (IE浏览器) :因为在早期IE占有大量的 ...

  10. thinkphp5.0助手函数占用服务器资源

    db('user')  默认情况下,每次请求都会重新连接数据库,这样会占用服务器资源 方法1.如果不想每次都重连可以这样 db("List",[],false) 方法2.还可以直接 ...