index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

</head>

<body>

<div ng-app="myApp">

    <custom-tags>122</custom-tags>

    <div class="custom-tags">

    </div>

    <div custom-tags>

    </div>

    <!--directive:custom-tags-->

</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', [],['$compileProvider',function ($compileProvider) {

    $compileProvider.directive('customTags',function () {

        return {

            //E:element C:class属性 A:attribute M:代表注释

            restrict:"ECAM",//限制约束条件

            //替换

            template:'<div>custom-tags-html</div>',

            replace:true  //如果此配置为true则替换指令所在的元素 如果为false或者不指定 则把当前指令追加到所在元素的内部

        }

    })

}])

　　运行结果：

angularJS1笔记-(9)-自定义指令(restrict/template/replace)的更多相关文章

  1. angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)

    自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...

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

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

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

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

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

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

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

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

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

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

  7. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

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

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

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

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

随机推荐

  1. Go压缩文件

    Go压缩文件 首先是恭喜IG获得S8全球总决赛冠军,IG牛逼.但咱是一介草民,狂欢后,还是得老老实实的开始敲代码.最近做了一个给底层固件压缩加密的工具,是使用C#做的,已经提交出去可以正常使用的.既然 ...

  2. OpenCV学习系列（零） Mac下OpenCV + xcode环境搭建

    # OpenCV学习系列(零) Mac下OpenCV + xcode环境搭建 [-= 博客目录 =-] 1-学习目标 1.1-本章介绍 1.2-实践内容 1.3-相关说明 2-学习过程 2.1-hom ...

  3. Oracle OEM启动方法

    首先要启动 listener: lsnrctl start 对于dbconsole:emctl start dbconsole

  4. PPAS可以安装分区表

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackg ...

  5. c++ 动态数组，指针与动态内存分配

    教学内容: 内存的使用 动态内存分配malloc函数 分配内存时使用sizeof运算符 用指针访问内存 以数组的形式访问内存 一.内存的使用 堆(heap) 在程序执行期间分配内存时,内存区域中的这个 ...

  6. AGC 005 D - ~K Perm Counting

    D - ~K Perm Counting 链接 题意: 求有多少排列对于每个位置i都满足$|ai−i|!=k$.n<=2000 分析: 容斥+dp. $answer = \sum\limits_ ...

  7. loj2230 「BJOI2014」大融合

    LCT裸题 我LCT学傻了这题明显可以树剖我不会树剖了 本来的siz是Splay上的子树和,并没有什么用. 所以每个点维护虚子树和和子树和 虚子树和即虚边连接的子树和,且只有在access和link操 ...

  8. JDBC注册驱动的三种方式(MySQL)

    第一种:通过反射Class.forName("com.mysql.jdbc.Driver"); 第二种:通过DriverManage的静态方法DriverManager.regis ...

  9. 利用自定义 ORM 下使用 flask-login 做登录校验使用笔记

    1. 安装: pip install flask_login 2. 使用: 注册应用 import os from flask_login import LoginManager, current_u ...

  10. gradle springboot 项目运行的三种方式

    一.java -jar 二.eclipse中 Java Application 三.命令行 gradle bootRun