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的 ...
随机推荐
- springboot hessian
注意把hessian的依赖换成4.0.38或者把git文件里的4.0.37放到maven私服中去,推荐使用4.0.37版本.38版本存在序列化bigdecimal的问题. <dependency ...
- 项目中是用eCharts
1.首先在项目中引入echart.js库. <!DOCTYPE HTML> <%@page contentType="text/html; charset=UTF-8&qu ...
- CentOS6.5使用createrepo搭建本地源
本地搭建本地yum源采用的rpm全部来自CentOS-6.5-bin-DVD1&DVD2; 我的是在虚拟机环境安装,先检查我的操作系统版本: 1 2 3 4 [adam@ultraera ~] ...
- 最近修改的几个小bug
最近修改的几个 bug,问题不大,查找起来却几番周折,汇总起来如下. 1.诡异电话号码 客服邮件反馈,很多用户服务热线变成了“0371-45875487”.看到这问题的第一反映是可能因为程序某个地方有 ...
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- 推荐10个 CSS3 制作的创意下拉菜单效果
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- Javascript内存泄露
在过去一些的时候,Web开发人员并没有太多的去关注内存泄露问题.那时的页面间联系大都比较简单,并主要使用不同的连接地址在同一个站点中导航,这样的设计方式是非常有利于浏览器释放资源的.即使Web页面运行 ...
- Azure ARM (3) ARM支持的服务类型
<Windows Azure Platform 系列文章目录> 我们在使用ARM创建资源的时候,首先要确认哪些Azure服务,支持ARM模式. 具体内容,我们可以参考连接:https:// ...
- jQuery源码解读-事件分析
最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...
- 【转载】Memcached在.Net中的基本操作
一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...