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. react fake double , bind click and dblclick on the same element

    smartClick:function(id,name,waiter,e){ var desk = $$(e.currentTarget).data('raw'); if(this.lastClick ...

  2. 时间戳转为C#格式时间

    经常发现很多地方使用一个时间戳表示时间.比如: 1370838759 表示 2013年6月10日 12:32:39. 我们就需要一个工具,方便地转换这种时间格式 什么是时间戳? 时间戳, 又叫Unix ...

  3. 径向基（RBF）神经网络python实现

    from numpy import array, append, vstack, transpose, reshape, \ dot, true_divide, mean, exp, sqrt, lo ...

  4. HTTPS为什么又快又安全？

    一.基础:对称加密和非对称加密 对称加密 通信两端用一样的密钥加解密.如DES.AES. 优点:性能损耗低,速度快: 缺点:密钥存在泄露的可能. 非对称加密 通信两端各自持有对方的公钥及自己的私钥,通 ...

  5. Object C学习笔记3-对象的使用和定义

    1. 如何定义一个对象 在面向对象的语言中,定义一个对象是使用Class关键字,而在Object-C中则是使用@interface,@interface用于定义对象的属性和方法,@implementa ...

  6. UWP 自然灾害App在刷新数据后卡死的解决方案

    一直以为都在纳闷,为啥我的其他app崩溃次数几乎为0,而单单这个App的崩溃次数简直逆天了,我都不敢相信. 每天都有至少上千次crash...我也是服的 不甘心,趁着这次重构的机会,把代码好好捋了1下 ...

  7. 聊聊Http协议

    http协议是大家在互联网中最为熟悉的协议,只要上网大家都会遇到,但是,很多人被问道什么是http协议,http协议的内容是什么就懵了.这里,我们随便聊聊http协议. 首先,我们说说协议.我一直觉得 ...

  8. [转载]在Windows下为PHP5.6安装redis扩展和memcached扩展

    一.php安装redis扩展   1.使用phpinfo()函数查看PHP的版本信息,这会决定扩展文件版本       2.根据PHP版本号,编译器版本号和CPU架构, 选择php_redis-2.2 ...

  9. Linux之服务器介绍

    服务器,也称伺服器,是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力. 服务器: 服务器指的是网络中能对其他机器提供某些服务的计算机系统 ...

  10. 与（&）、或（|）等运算符理解及其特殊用途

    1.按位与运算符(&) 在与运算中两个开关是串联的,如果我们要开灯,需要两个开关都打开灯才会打开.理解为A与B都打开,则开灯,所以是1&1=1任意一个开关没打开,都不开灯,所以其他运算 ...