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. 学习sbtenv

    背景 最近由于工作需要, 我总是在不同的scala项目间流动开发. 这就遇到一个很棘手的问题, 这几个项目用的sbt版本不一致, 老项目用的是 sbt 0.13.15, 新项目用的是 sbt 1.0. ...

  2. MacOS下netstat和lsof使用的若干问题

    [-= 博客目录 =-] 1-相关说明 1.1-博客介绍 1.2-netstat和lsof 2-学习过程 2.1-netstat 2.2-lsof 2.3-netstat和lsof区别和关联 3-资料 ...

  3. My97DatePicker：开始时间和结束时间的最大间隔为1个月30天，并且不大于当前时间（3种方法）

    问题的背景 在之前做Web项目的时候,开始时间和结束时间,只有2个要求: 1.开始时间必须小于等于结束时间,不能超过当前时间. 2.结束时间必须大于等于开始时间,不能超过当前时间. 由于开始时间不大于 ...

  4. 前端- html -总结

    html概述 head标签 title 显示网站的标题 meta 提供有关页面的原信息 link 链接css资源文件.网站图标 style 定义内部样式表 script 链接脚本js文件 body标签 ...

  5. [SHOI2008]仙人掌图

    [SHOI2008]仙人掌图 LG传送门 还不会仙人掌的同学可以看看我对仙人掌知识的一些梳理. 题意就是求仙人掌的直径,直径定义为图中最短路径最长的两点间的最短路径长度. 按照套路,先考虑求树的直径我 ...

  6. 细说 Django — web 前后端分离

    一.所谓的前后端分离 1.渊源 前端发展史 2.特点 前端:负责 View 和 Controller 层 后端:只负责 Model 层,业务处理/数据等 3.优缺点 优点:解耦,解放前端,职责明确 缺 ...

  7. .net 分布式学习计划

    一: 1:.net分布式系统架构的思路     https://blog.csdn.net/slowlifes/article/details/53162014 2: nginx+iis实现负载均衡 ...

  8. Jenkins部署资料

    http://www.cnblogs.com/gaohongchen01/p/5058928.html https://www.javacodegeeks.com/2015/04/jenkins-ho ...

  9. 【日常训练】Help Chef Gerasim（Codeforces 99B）

    题意与分析 需要注意非法情况.换言之,合法情况其实很苛刻. 代码 /* * ACM Code => cf99b.java * Written by Sam X * Date: 三月, 19, 2 ...

  10. Eclipse Photon没有Server选项的问题

    安装Eclipse Photon版本的时候选择了Java开发,导致最后需要本地tomcat调试的时候找不到Server配置选项. ①在软件eclipse下的Help->InstallNew So ...