angularJS1笔记-(9)-自定义指令(restrict/template/replace)
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)的更多相关文章
- angularJS1笔记-(11)-自定义指令(transclude/priority/terminal)
自定义指令的属性 transclude:为true时,允许把html中新定义的指令中原来的dom运用到该指令的template中. 属性priority,设置该指令的优先级,优先级大的先执行,默认指令 ...
- angularJS1笔记-(15)-自定义指令(accordion伸缩菜单原始实现)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(14)-自定义指令(scope)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(13)-自定义指令(controller和controllerAs实现通信)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(12)-自定义指令(compile/link)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angularJS1笔记-(10)-自定义指令(templateUrl属性)
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- AngularJs学习笔记3——自定义指令
指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
- AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
随机推荐
- 关于Modelsim SE软件Fatal License Error的解决方法
操作环境:Win7 32位系统 软件版本:Modelsim SE 10.1a Modelsim SE软件有时会弹出如图1所示“Fatal License Error”的提示信息,原因可能是软件破解不彻 ...
- 用EXCEL的VBA将PHPCMS的备份文件转换成HTML的一次尝试
背景 有个PHPCMS的网站停了,但是网站的历史文章又想要看看,网站停了以后,管理员发来了网站的所有数据. 分析 因为不会PHP,所有本地环境跑网站不优先考虑. 有MySQL数据库文件,但是不熟悉My ...
- Dotnet Core Cli 解决方案中多个项目的相互引用和第三方库引用
dotnet add app/app.csproj reference lib/lib.csproj app项目引用lib项目 dotnet add package Newtonsoft.Json 当 ...
- 对Oracle的游标进行更为精细的控制
摘要自 Oracle性能控制艺术 DECLARE l_ename emp.ename%TYPE :='SCOTT'; l_empno emp.empno%TYPE; l_cursor INTEGER; ...
- 【BZOJ1041】[HAOI2008]圆上的整点
[BZOJ1041][HAOI2008]圆上的整点 题面 bzoj 洛谷 题解 不妨设\(x>0,y>0\) \[ x^2+y^2=r^2\\ y^2=(x+r)(x-r) \] 设\(r ...
- cvc-complex-type.2.4.a: Invalid content was found starting with element 'display-name'
cvc-complex-type.2.4.a: Invalid content was found starting with element 'display-name'. One of '{&qu ...
- Distributed3：SQL Server 分布式数据库性能测试
我在三台安装SQL Server 2012的服务器上搭建分布式数据库,把产品环境中一年近1.4亿条数据大致均匀地存储在这三台服务器中,每台Server 存储4个月的数据,物理机的系统配置基本相同:内存 ...
- TCP/IP 协议簇 端口 三次握手 四次挥手 11种状态集
第1章 概念介绍 1.1 VLAN 1.1.1 什么是VLAN VLAN(Virtual LAN),翻译成中文是“虚拟局域网”.LAN可以是由少数几台家用计算机构成的网络,也可以是数以百计的计算机构成 ...
- net 快速打印日志
System.IO.File.AppendAllText(@"F:WriteText.txt", "日志内容“+"\r\n");
- VS2017 C++操作mysql数据库
1.首先安装mysql 具体教程可以参考https://blog.csdn.net/zhouzezhou/article/details/52446608 注意安装产品的时候记得选择MySQL Con ...