作用:需要用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自定义指令详解的更多相关文章

  1. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  2. AngularJs自定义指令详解(6) - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  3. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  4. AngularJs自定义指令详解(9) - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  5. AngularJs自定义指令详解(7) - multiElement

    multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...

  6. AngularJs自定义指令详解(3) - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...

  7. AngularJs自定义指令详解(2) - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  8. AngularJs directive 'transclude' option 详解

    transclude好像不是一个英语单词,有道词典里没有,百度翻译的意思是嵌入. transclude在angularjs的自定义的derective中是比较常见的一个东西,所有有必要要了解它. 我们 ...

  9. day3 自定义指令详解

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

随机推荐

  1. eclipse插件svn和客户端工具TortoiseSvn的版本对应关系

    如果同时使用这两个软件,一定要保证版本的对应关系: 插件svn1.4.x对应TortoiseSvn 1.5.x 插件svn1.6.x对应TortoiseSvn 1.6.x 插件svn1.8.x对应To ...

  2. ICONIX Process

    1.像rup,iconix是用例驱动的但是比rup更轻量级.  iconix 仅仅使用四种diagram(用例图.健壮性图.时序图.类图)就可以把用例文本转成代码. 2.值得注意的健壮性分析图并不是u ...

  3. java实现多文件上传01

    1.html代码 <html> <head> <link rel="stylesheet" type="text/css" hre ...

  4. SpringMvc-helloword

    说明:在此只说明helloword的简单实现,通过helloword例子先了解springMvc是这样工作的,然后在一步步的研究原理 配置web.xml 1.配置servlet servlet-cla ...

  5. xml 转义特殊字符

    写了个request2XML的方法,每当数据中有'<'.'&'符号时,封装的XML就无法解析.发现了XML里的CDATA属性,问题迎刃而解!在XML文档中的所有文本都会被解析器解析. 只 ...

  6. [BJWC2008]秦腾与教学评估

    嘟嘟嘟 二分好题. 怎么二分呢?反正我是没想出来. 看了题解. 因为只有一个为奇数的点,所以对于一个位置x,求出区间[0, x]的教总和,如果为奇数,说明x取大了:否则x取小了(妙啊). 虽然答案在i ...

  7. ZOJ 1610 Count the Colors【题意+线段树区间更新&&单点查询】

    任意门:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1610 Count the Colors Time Limit: 2 ...

  8. intellij idea下载安装以及创建项目(输出Hello World)

    主题一:下载 第一:可以百度下载 第二:直接进行官网链接下载地址:http://www.jetbrains.com/idea/ 第一步: 第二步: 下载完成后进行安装 主题二:安装 点击Next速度可 ...

  9. 【luogu P1144 最短路计数】 题解

    题目链接:https://www.luogu.org/problemnew/show/P1144 #include <iostream> #include <cstdio> # ...

  10. Joker

    人生的第一位老师当然是我的爸妈,他们生我下来,教我学会走路讲话,教会我做人的道理,当然,他们还给我名字.人生的第二位老师就是我的初中老师,初中班主任对我非常好,在之后的考上市一中也是其中的缘由,初中班 ...