自定义指令的属性 transclude：为true时，允许把html中新定义的指令中原来的dom运用到该指令的template中。

属性priority，设置该指令的优先级，优先级大的先执行，默认指令的优先级是0（但ng-repeat指令的优先级默认是1000）。 属性terminal:为true时，指示优先级小于当前指令的指令都不执行，仅执行到本指令。

index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<div ng-app="myApp">

    <div ng-controller="firstController">

        <custom-tags>

            <div>$AAAAAA $我是指令[one-transclude]元素内部的内容</div>

        </custom-tags>

        <div custom-tags2 custom-tags3></div>

    </div>

</div>

<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>

<script type="text/javascript" src="app/index.js"></script>

<script>

</script>

</body>

</html>

　　index.js:

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

    //定义第一个指令customTags

    .directive('customTags',function () {

        return{

            restrict:"ECAM",

            template:"<div><span>新数据 </span><span ng-transclude></span>新数据</div>",//<span ng-transclude></span> 原来的dom

            replace:true,//为true时，允许把节点内原来的dom放入template中

            transclude:true //为true表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置 设置的template或templateUrl都必须仅由一个最外层标签包裹

        }

    })

    //定义第二个指令customTags2

    .directive('customTags2',function () {

        return {

            restrict:'ECAM',

            template:'<div>222</div>',

            replace:true,

            priority:-1  //指示指令的优先级，优先级大的先执行，默认指令们的优先级都是0，但ng-repeat指令的优先级是1000

        }

    })

    //定义第三个指令customTags3

    .directive('customTags3',function () {

        return {

            restrict:'ECAM',

            template:'<div>333</div>',

            replace:true,

            priority:0,

            terminal:true  //为true时，指示优先级小于本指令的优先级的directive都不再执行

        }

    })

    .controller('firstController',['$scope',function ($scope) {

        $scope.name = "张三";

    }]);

　　运行结果:

angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)的更多相关文章

  1. angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. angularJS1笔记-(12)-自定义指令(compile/link)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. angularJS1笔记-(10)-自定义指令(templateUrl属性)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. angularJS1笔记-(9)-自定义指令(restrict/template/replace)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. angularJS1笔记-(14)-自定义指令(scope)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)

    index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  7. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  8. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  9. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

随机推荐

  1. lua通用数据类型

    TValue结构 TValue这个结构体是Lua的通用结构体,,Lua中的所有的数据都可以使用这个结构体来表示.很容易想到,在面向对象中,这个结构体是一个基类,派生出来的都是其他的子类. TValue ...

  2. SFTP Using Chilkat Active component

    https://www.example-code.com/vb6/sftp_uploadBandwidthThrottle.asp Private Sub Command1_Click() ' Imp ...

  3. 2 python介绍

    1.Python介绍:龟叔 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写Python语言的编译器.Python这个名字,来自Gui ...

  4. jquery 直接访问图片路径

    jQuery("#img").attr("src",function(){return this.src+"?"});

  5. 在Docker中安装和部署MongoDB集群

    此文已由作者袁欢授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在Docker中安装mongodb 采用的mongodb镜像:https://registry.hub.doc ...

  6. 【JUC源码解析】Phaser

    简介 Phaser,阶段器,可作为一个可复用的同步屏障,与CyclicBarrier和CountDownLatch类似,但更强大. 全览图 如上图所示,phaser,支持phaser树(图中,简化为p ...

  7. javascript中encodeURI和decodeURI方法使用介绍

    encodeURI和decodeURI是成对来使用的,因为浏览器的地址栏有中文字符的话,可以会出现不可预期的错误, 所以可以encodeURI把非英文字符转化为英文编码,decodeURI可以用来把字 ...

  8. 「专题训练」Collecting Bugs（POJ-2096）

    题意与分析 题意大致是这样的:给定一个\(n\times s\)的矩阵,每次可以随机的在这个矩阵内给一个格子染色(染过色的仍然可能被选中),问每一行和每一列都有格子被染色的次数的期望. 这题如果从概率 ...

  9. Linux(centos7)之更换安装python3(二)

    Linux不比window好安装python,折腾了好久,终于成功安装上了python,window上一个安装包完事,可惜Linux上python版本太低不好使,还要更换为3版本,百度了好久,教程上总 ...

  10. C#四则运算器（多态方法实现）

    在上一节C#课上,我们学习了用类的继承的方式来做一个四则运算器,然而老师的代码在课上演示的效果并不理想,而且没有使用多态的思想实现,今天我们就来用多态的方式实现四则运算器. 1. 题目及要求 2. A ...