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

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

index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. </head>
  6. <body>
  7. <div ng-app="myApp">
  8.     <div ng-controller="firstController">
  9.  
  10.         <custom-tags>
  11.             <div>$AAAAAA $我是指令[one-transclude]元素内部的内容</div>
  12.         </custom-tags>
  13.         <div custom-tags2 custom-tags3></div>
  14.     </div>
  15. </div>
  16.  
  17. <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
  18. <script type="text/javascript" src="app/index.js"></script>
  19.  
  20. <script>
  21. </script>
  22.  
  23. </body>
  24. </html>

　　index.js:

  1. var myApp = angular.module('myApp', [])
  2.     //定义第一个指令customTags
  3.     .directive('customTags',function () {
  4.         return{
  5.             restrict:"ECAM",
  6.             template:"<div><span>新数据 </span><span ng-transclude></span>新数据</div>",//<span ng-transclude></span> 原来的dom
  7.             replace:true,//为true时，允许把节点内原来的dom放入template中
  8.             transclude:true //为true表明我们希望在模板中将指令的内部元素嵌入到模板中的某个位置 设置的template或templateUrl都必须仅由一个最外层标签包裹
  9.         }
  10.     })
  11.     //定义第二个指令customTags2
  12.     .directive('customTags2',function () {
  13.         return {
  14.             restrict:'ECAM',
  15.             template:'<div>222</div>',
  16.             replace:true,
  17.             priority:-1  //指示指令的优先级，优先级大的先执行，默认指令们的优先级都是0，但ng-repeat指令的优先级是1000
  18.         }
  19.     })
  20.     //定义第三个指令customTags3
  21.     .directive('customTags3',function () {
  22.         return {
  23.             restrict:'ECAM',
  24.             template:'<div>333</div>',
  25.             replace:true,
  26.             priority:0,
  27.             terminal:true  //为true时，指示优先级小于本指令的优先级的directive都不再执行
  28.         }
  29.     })
  30.     .controller('firstController',['$scope',function ($scope) {
  31.         $scope.name = "张三";
  32.     }]);

　　运行结果:

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. 20155220 吴思其 《网络攻防》 Exp1 PC平台逆向破解(5)M

    20155220 <网络攻防> Exp1 PC平台逆向破解(5)M 实践内容 通过对实践对象--20155220pwn1的linux可执行文件的修改或输入,完成以下三块: 手工修改可执行文 ...

  2. 2017-2018-1 20155313 《信息安全系统设计基础》 Myod

    2017-2018-1 20155313 <信息安全系统设计基础> Myod Myod要求 1.复习c文件处理内容 2.编写myod.c 用myod XXX实现Linux下od -tx - ...

  3. python基础学习1-迭代器

    #!/usr/bin/env python # -*- coding:utf-8 -*- #自定义迭代器 需要 重写 __iter__()和__next__() 两个魔法方法 class Fibs: ...

  4. 【转载】COM小结

    原文:http://blog.csdn.net/byxdaz/article/details/6595210 一.Com概念 所谓COM(Componet Object Model,组件对象模型),是 ...

  5. SQL Server 内存和换页（Paging）

    在进程开始执行时,进程首先申请虚拟地址空间VAS(Virtural Address Space),VAS是进程能够访问的地址空间,由于VAS不是真正的物理内存空间,操作系统必须将VAS隐射到物理内存空 ...

  6. 动态加载与插件系统的初步实现（四）：解析JSON、扩展Fiddler

    按文章结构,这部分应该给出WCFRest项目示例,我想WinForm示例足够详尽了,况且WCFRest还不需要使用插件AppDomain那一套,于是把最近写的Fiddler扩展搬上来吧. Fiddle ...

  7. React——event

    1.绑定在React元素上的事件与绑定在DOM元素上的事件非常相似,但是也有一个不同的地方 React事件使用驼峰命名法命名 //在HTML中 <button onclick='handle() ...

  8. nginx遇到的配置问题

    配置的例子如下: server { listen ; server_name localhost; #kzjtrans-web location /kzjtrans-web/ { proxy_pass ...

  9. aws存储桶s3使用

    关于aws s3的使用说明: aws官方文档地址:https://docs.aws.amazon.com/s3/index.html#lang/zh_cn 创建s3与基础使用: 1.登陆aws控制台- ...

  10. SSH结合EasyUI系统（一）———简单介绍

    鉴于前文<不仅仅是吐槽>,决定将自己学过的和在学的东西整理一下放进园子:做一个好园友! 接下来将会持续更新的是近一段时间在学的java web中比较流行的框架SSH(Struts+Spri ...