angularjs Directive自定义指令详解
作用:需要用Directive有下面的情景:
1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件,在其他地方进行重用。
3.使用公共代码,减少重复使用,减少重复代码,
指令的属性:
其中对scope进行研究:
scope属性的3种取值:
1.false(默认值) 当使用false可以理解成指令内部并没有一个新的scope,它和指令以外的代码共享同一个scope,即指令里的scope和controller里的$scope相同,----------继承不隔离。
2.true 当使用ture时可以理解为指令内部所有的scope继承于外部的父scope,但是指令内部的值的改变并不会影响外部的值。-------------继承隔离
3. { }
创建一个新的“隔离”scope,里面的绑定策略有三种:
@:单向绑定,外部scope能够影响内部scope,但反过来不成立,值单绑必须用{{}}
=:双向绑定,外部scope和内部scope的model能够相互改变,值双绑用” ”就可以
&:把内部scope的函数的返回值和外部scope的任何属性绑定起来,一般用 ” ”
具体请看:https://blog.csdn.net/VitaLemon__/article/details/52213103;
Restrict属性:
可取值:1.E (element) 标签形
2.A (attrute) 属性形
3.C (class) 类型
4. M Comment 注释型
Template属性:
template是指令链接DOM模板,一般为html代码。
TemplatUrl属性:
templateUrl是指定一个字符串式的内嵌模板,如果你指定了模板是一个URL,那么是不会使用的。一般指定的为另一个页面模板。
Replace属性:
当为true时:表示链接模板替换原有元素,即template的内容替换页面原有的。
当为false时:表示链接模板不替换原有元素,即template的内容不替换页面原有的。
常和transclude: Boolean使用
Link属性:有待研究。
angularjs Directive自定义指令详解的更多相关文章
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- AngularJs自定义指令详解(6) - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- AngularJs自定义指令详解(1) - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJs自定义指令详解(9) - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解(7) - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- AngularJs自定义指令详解(3) - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
- AngularJs自定义指令详解(2) - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs directive 'transclude' option 详解
transclude好像不是一个英语单词,有道词典里没有,百度翻译的意思是嵌入. transclude在angularjs的自定义的derective中是比较常见的一个东西,所有有必要要了解它. 我们 ...
- day3 自定义指令详解
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
随机推荐
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
- 转:什么是4D(DRG、DLG、DOM、DEM)数据?
ps:摘抄地址http://blog.163.com/wangqing_rs/blog/static/16451519120111026102916472/ 什么是4D(DRG.DLG.DOM.DE ...
- 【Linux】sudo用户权限管理
权力下放 一.权力分配- sudo Sudo是Unix/Linux平台上的一个非常有用的工具,它允许系统管理员分配给普通用户一些合理的"权力",让 他们执行一些只有超级用户或其他特 ...
- log4j 配置详解
参考如下两个网址,讲的很详细,先看第一个再看第二个: log4j使用介绍:http://swiftlet.net/archives/683 java日志处理组件log4j--log4j.xml配置详解 ...
- Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? 线程的sleep()方法和yield()方法有什么区别?
Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指定的时间 ...
- SQL Server现有表上自增属性增删原理研究
项目需求:线上有一张表,数据类型为int类型,现在由于项目变更,需要这一列添加自增属性,而且,为了保证能尽快完成,希望使用脚本来实现,而不是在表设计中通过GUI窗口来实现. 问题来了:SQL Serv ...
- RAC常用日志总结
12C RAC:ocssd启动失败log目录:/u01/app/grid/diag/crs/host02/crs/trace/alert.log
- Orchard Core 文档翻译 (五)自动路由 Autoroute (OrchardCore.Autoroute)
Autoroute (OrchardCore.Autoroute) 此模块允许您为内容项指定自定义URL(永久链接 permalink). Autoroute Part 将此部分附加到内容类型以指定内 ...
- 如何使用代码获得一个function module的Where Used List
如果要获得一个function module的Where Used List,我们通常用的办法是使用ABAP workbench里提供的功能. where used list显示结果如下: 但我接到一 ...
- oracle数据库中创建表空间和临时表空间,以及用户和密码以及设置密码永不过期
首先进入oracle用户,命令是: su - oracle sqlplus /nolog connect system/123456@ora11g 或者 [oracle@localhost ~]$ ...