作用:需要用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. Java入门到精通——框架篇之Hadoop概述

    一.Hadoop来历 Hadoop的思想来源于Google在做搜索引擎的时候出现一个很大的问题就是这么多网页我如何才能以最快的速度来搜索到,由于这个问题Google发明了倒排索引算法,通过加入了Map ...

  2. 【起航计划 034】2015 起航计划 Android APIDemo的魔鬼步伐 33 App->Service->Local Service Binding 绑定服务 ServiceConnection Binder

    本例和下列Local Service Controller 的Activity代码都定义在LocalServiceActivities.Java 中,作为LocalServiceActivities ...

  3. 栈帧示意图:stack pointer、frame pointer

    更多参考:http://www.embeddedrelated.com/usenet/embedded/show/31646-1.php 一: The calling convention descr ...

  4. java面试题----String、StringBuffer、StringBudder区别

    面试题1 - 什么情况下用+运算符进行字符串连接比调用StringBuffer/StringBuilder对象的append方法连接字符串性能更好? 面试题2 - 请说出下面程序的输出. class ...

  5. js判断一个对象是否为数组

    1,真正的数组的判断方法 javascript中最简单的声明数组方法为: var a = []; 判断是否为数组的最直接的方法为: 复制代码 代码如下: a instanceof Array //tr ...

  6. Dynamics CRM 批量新建域用户

    好久没写了,今天大牛教了我偷懒的批量新建域用户的方法 是不是觉得  控制面板 =>管理工具=>用户和计算机=>Users=>新建用户,一个个建,很烦是不是,而且耗时,我上个项目 ...

  7. 【Spring实战】—— 11 通过AOP为特定的类引入新的功能

    如果有这样一个需求,为一个已知的API添加一个新的功能. 由于是已知的API,我们不能修改其类,只能通过外部包装.但是如果通过之前的AOP前置或后置通知,又不太合理,最简单的办法就是实现某个我们自定义 ...

  8. react中PropTypes与DefaultProps的应用

    每个组件都有自己的props参数,这参数是从父组件接收的一些属性,那么如何对参数的类型作校验.如何定义参数的默认值.这里涉及到两个基础的概念,叫做proptypes 和 defaultprops.子组 ...

  9. T-SQL 基础 2

    运行结果: while 循环 运行结果: 运行结果 : if 判断语句 计算 1到100的基数 运行结果 1到100的偶数 运行结果 局部变量前缀是 @ 全局变量(包括系统变量) 前缀是 @@

  10. 广义线性模型(GLM, Generalized Linear Model)

    引言:通过高斯模型得到最小二乘法(线性回归),即:      通过伯努利模型得到逻辑回归,即:      这些模型都可以通过广义线性模型得到.广义线性模型是把自变量的线性预测函数当作因变量的估计值.在 ...