angular学习的一些小笔记(中)之directive
directive里面的几个配置，上代码就清晰了
<!DOCTYPE html>
<html ng-app='app'>
<head>
<meta charset='UTF-8'>
<title>test</title>
<script type="text/javascript" src='static/plugins/angular.min.js'></script>
</head>
<body>
<my-directive></my-directive>
</body>
<script type="text/javascript">
angular.module('app',[])
.directive('myDirective',function(){
return{
restrict:'E',
template:'<a href="#">click me</a>'
};
})
</script>
</html>
这段代码在浏览器上打开是这样的，
<my-directive><a href="#">click me</a></my-directive>
看到吗，directive里面的template在标签的里面，是标签的子元素
然后再看，在配置一个replace
<body>
<a href="#">click me</a> <script type="text/javascript">
angular.module('app',[])
.directive('myDirective',function(){
return{
restrict:'E',
replace:true,
template:'<a href="#">click me</a>'
};
})
</script>
</body>
replace为true的时候可以看到的是原来的自定义标签被template替代了
要是restrict有两个值，比如上代码
<body>
<my-directive></my-directive>
<div my-directive></div> <script>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'AE', // modified line
template: '<a href="http://google.com">Click me</a>'
}
})
</script> </body>
这样的话就会，
<body>
<my-directive><a href="http://google.com">Click me</a></my-directive>
<div my-directive=""><a href="http://google.com">Click me</a></div> <script>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'AE', // modified line
template: '<a href="http://google.com">Click me</a>'
}
})
</script> </body>
看到了吗，两个里面都有template
angular学习的一些小笔记(中)之directive的更多相关文章
- angular学习的一些小笔记(中)之基础ng指令
一.布尔属性指令: ng-disabled:就是ng-disabled=true-->就指向不可用 <!doctype html> <html ng-app="&qu ...
- angular学习的一些小笔记(中)之ng-disabled轻松实现按钮是否可点击状态
哇,这个可以轻松实现输入值就按钮可点击,输入框没有值则不可点击的状态呀 看代码 <!doctype html> <html ng-app=""> <h ...
- angular学习的一些小笔记(中)之双向数据绑定
<!doctype html> <html ng-app=""> <head> <script src="https://aja ...
- angular学习的一些小笔记(中)之ng-init
ng-init是给angular执行给定的表达式,初始化变量的值 <!DOCTYPE html> <html> <head> <meta charset='U ...
- angular学习的一些小笔记(中)之表单验证
表单验证 我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlen ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
- angular学习笔记（1）- 四大核心特性
angular1学习笔记(1) - angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
随机推荐
- 使用Connetion的属性RetainSameConnection
在SSIS的组件中,很多都会连接到数据库进行操作,Connection有一个属性RetainSameConnection,默认值是False,控制着连接的打开和关闭的时机. 1,如果Connectio ...
- css margin
css中margin边界叠加问题: 看个同方向和异方向margin重叠现象: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- ZZUOJ1196: 单调数
/* 注意的事项:是输出小于 10^n的正整数的个数哦!开始的时候总比样例输出多一个数, 纠结了好久,原来是 0加了进去了! dpI[n][m]表示的是第n位添加数字m(0....9)的构成单调递增数 ...
- Unity3D 常用插件
1.FX Maker FX Maker是一款制作特效的工具,它专为移动操作系统做了优化.FX Maker包括300种Prefab特效,300种纹理结构.100种网格.100种曲线效果.支持英文和韩文, ...
- Deep learning：四十七(Stochastic Pooling简单理解)
CNN中卷积完后有个步骤叫pooling, 在ICLR2013上,作者Zeiler提出了另一种pooling手段(最常见的就是mean-pooling和max-pooling),叫stochastic ...
- 再次用CodeIgniter实现简易blog
天变冷了,人也变得懒了不少,由于工作的需要,最近一直在学习CodeIgniter(CI)框架的使用,没有系统的从PHP基本语法学起,在网上靠百度谷歌,东拼西凑的实现了一些简单的功能.所以,老PHPer ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- JavaScript及兼容性笔记
1. Json to String JSON.stringify(jsonobj)//(IE8+,Chrome 1+,FF 3+) //参考 http://www.nowamagic.net/libr ...
- node.js + mongodb 做项目的详解（一）
想写博客很长时间了,因为一直身患懒癌,所以一直拖到了现在.markdown的语法也是刚刚学,试验一下效果好了不说了,直接上干货了.----------------------------------- ...
- Halcon编程-基于纹理的mara检测
表面瑕疵检测是机器视觉领域非常重要的一个应用.机器视觉是集光学.机电和计算机三个领域的一门不算新的技术.但目前表面瑕疵检测在学界主要是计算机专业或者控制专业瞄准图像处理方向在做,而视觉光学系统这一块主 ...