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. PyQt5 笔记（01）：嵌套布局

    PyQt5 有四种布局:水平(QHBoxLayout).竖直(QVBoxLayout).网格(QGridLayout).表单(QFormLayout)在窗体中单一的布局应该不难,但若是比较复杂的布局, ...

  2. 【转载】Direct3D HLSL介绍(上)

    原文路径:http://www.csharpwin.com/csharpspace/3087.shtml 写过Direct3D程序的朋友们可能还记得,在以往,大家常为如何表现更多真实的材质(如玻璃.金 ...

  3. Flutter - 弹出底部菜单Show Modal Bottom Sheet

    在很多安卓App上,有很多底部弹出的菜单,这个在Flutter上同样可以实现. 先看一下效果 嗯,就是这样子的,当用户点击菜单区域以外的时候,菜单会自动关闭. 下面就看一下Dart语言实现 float ...

  4. Open-Drain&Push-Pull

    在配置GPIO(General Purpose Input Output)管脚的时候,常会见到两种模式:开漏(open-drain,漏极开路)和推挽(push-pull).对此两种模式,有何区别和联系 ...

  5. 用Metaclass实现一个精简的ORM框架

    存档: # -*- coding: utf-8 -*- class Field(object): def __init__(self, name, column_type): self.name = ...

  6. Your requirements could not be resolved to an installable set of packages

    使用composer下载laravel安装程序时(composer global require "laravel/installer"),报截图中的错误. 解决: 根据提示可知, ...

  7. zabbix4.0LTS安装配置

    一.环境准备 1.最小化安装centos7.5系统 2.安装常用软件包 yum install -y net-tools vim bash-completion 3.关闭selinux和修改主机名 v ...

  8. NO--15 微信小程序，scroll-view选项卡和跳转

    大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳至与之相对应的选项卡中.所以我们在开发该小程序时也做了相同的功能.如下图:   scr ...

  9. github在版本库中删除某个文件的所有历史记录

    github的目的就是版本控制,记录每一个版本的变动.然而有的时候我们往往希望从版本库中彻底删除某个文件,不再显示在历史记录中.例如不小心上传了一堆错误的文件,或者不小心上传了帐号.密码,那么这个时候 ...

  10. 使用C#把Tensorflow训练的.pb文件用在生产环境

    训练了很久的Tf模型,终于要到生产环境中去考研一番了.今天花费了一些时间去研究tf的模型如何在生产环境中去使用.大概整理了这些方法. 继续使用分步骤保存了的ckpt文件 这个貌似脱离不了tensorf ...