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. 【翻译】R 中的设计模式

    目录 R 中的设计模式 不动点算法 包装器模式 接口模式 柯里化(Currying) 闭包(Closures) 缓存模式 计数器模式 R 中的设计模式 本文翻译自 Design Patterns in ...

  2. 微信小程序的经纬度不想写死，需要转成number类型不能用浮点型

    click: function (e) { var msg = this.data.placeData; var latitude = Number(msg.latitude) var longitu ...

  3. python模拟随机游走

    在python中,可以利用数组操作来模拟随机游走. 下面是一个单一的200步随机游走的例子,从0开始,步长为1和-1,且以相等的概率出现.纯Python方式实现,使用了内建的 random 模块: # ...

  4. Spring的IOC理解（转载）

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...

  5. 快速搭建属于自己的mongodb数据库

    前言 MongoDB 是一个基于分布式文件存储的数据库.由C++语言编写,支持Windows,Linux,OSX,Solaris等平台,默认端口为27017,是一个效率非常高的nosql数据库. 我的 ...

  6. 2018年美国大学生数学建模竞赛(MCM/ICM) 比赛心得

    话不多说,题目先上: 这是我们这次选择的题目,说说建模的那些事! 美赛的时间和国赛挑战杯时间略有不同,貌似多的一天是为了让我们对文章进行一个翻译吧QAQ 建议参加美赛的同学可以参照此计划进行 Day0 ...

  7. ncl 函数源码 gc_inout

    转自气象家园论坛 经过不懈努力,终于找到了gc_inout函数的源代码,原来在这个文件里面!一颗赛艇 位置:/ncl_ncarg-6.5.0-src/ni/src/lib/nfpfort/sg_too ...

  8. opengl坐标系统

    概述 为了将坐标从一个坐标系变换到另一个坐标系,我们需要用到几个变换矩阵,最重要的几个分别是模型(Model).观察(View).投影(Projection)三个矩阵.我们的顶点坐标起始于局部空间(L ...

  9. Deep learning for visual understanding: A review 视觉理解中的深度学习：回顾 之一

    Deep learning for visual understanding: A review 视觉理解中的深度学习:回顾 ABSTRACT: Deep learning algorithms ar ...

  10. Gitlab CI-1.Gitlab部署

    参考文档: GitLab Documentation:https://docs.gitlab.com/ce/ Installation and Configuration using omnibus ...