AngularJS中的指令

说到AngularJS,我们首先想到的大约也正是双向数据绑定和指令系统了,那二者也是AngularJS中万分吸引人的地点。双向数据绑定呢,感觉没什么好说的,那么前几日大家就来总结的座谈下AngularJS那个框架的指令系统,本身也是初学,查阅了部分资料,就算有部分说的不得了的地点,万望提出。

指令作为AngularJS中然则重大的一部分,所以这么些框架本身也是自带了比较多的的通令,然而在支付中,那个指令平时无法满意大家的急需,所以大家也是索要自定义一些命令的。那么二个AngularJS指令在HTML代码中能够有各个表现形式:

壹 、作为1个新的HTML成分来行使。

<hello></hello>或者<hello/>

② 、作为一个因素的属性来利用

<div hello></div>

③ 、作为三个因素的类来选用

<div class="hello"></div>

四 、作为注释来利用

<!--directive: hello -->

留意那里有二个圈套,就是在“directive:
hello”那几个的末端要有一个空格,不然的话是从未效劳的,同时引进注释的主意的依旧少用,借使非要追求高大上,这就随性吧。既然指令有上述几种表现情势,那么具体他是怎么来定义的吧?

.directive('hello',function(){
      return {
        restrict:'AECM',
        template:'<button>click me</button>'
      }
    })

下边就是定义一个限令最简便的代码了,没有之一。在上头的代码中,directive()那些艺术定义了二个新的下令,该格局有五个参数,第一个’hello’正是规定指令的名字为hello,第3个参数是回来指令对象的函数。那么在地方的代码中,该函数根本采取了七个属性来定义这些hello指令:

1、restrict[string]本条本性,重假若用来规定指令在HTML代码中得以应用什么表现情势。A代表属性、E代表成分、C代表类、M代表注释。真实情状中大家一般接纳AE那三种方式。

2、template[string or
function]这几个个性,规定了指令被Angular编写翻译和链接(link)后生成的HTML标记,那性情格能够不难到唯有1个HTML文本在内部,也得以专门复杂,当该属性的值为function的时候,那么该方法重返的就是代表模板的字符串,同时也能够在其间使用{{}}那个表达式。

template: function () {
          return '<button>click me</button>';
 }

而是在相似意况下,template那本性格都会被templateUrl取代掉,用它来针对二个外表的文件地点,所以大家平日把模版放在外部的3个HTML文件中,然后使用templateUrl来指向他。

在概念指令的时候,除了上述多个最基础的本性外,大家还会动用到其余的很多属性,那么下边大家就来挨家挨户的说下:

1、priority[number]个性,那么些性格是来分明自定义的指令的预先级的,当1个DOM成分上边有二个上述的通令的时候,就须求去相比指令的先行级了,优先级高的吩咐先举行。这些优先级正是用来在实践命令的compile函数前,先排序的,那么关于compile这一个函数,大家会在下边仔细的说下。

2、terminal[boolean]品质,该参数用来定义是不是终止当前因素上比本指令优先级低的下令,要是值为true,正是正规情况,依据事先级高低的依次来实施,假如设置为false,就不会履行当前因素上比本指令优先级低的通令。

3、replace[boolean]性能,那一个性子用来显著生成的HTML内容是或不是会交替掉定义此命令的HTML成分。当大家把该属性的值设为true的时候,打开控制台看看您会意识那些命令生成的因素会是如此的:

图片 1

当大家设置为false的时候会是如此的:

图片 2

4、link[function]品质,在上边的事例中,大家自定义的下令其实并未多马虎义,那只是贰个最简便的命令,有成都百货上千的质量大家都没有为她定义,所以没有多大用途。比如那几个link函数,它总结八个参数:scope、element、attrs。那些link函数首如果用来添加对DOM成分的事件监听、监视模型属性别变化化、以及更新DOM的。它当中八个参数:

一:scope参数,在我们尚无为命令定义scope属性的时候,那么她代表的正是父controller的scope。

二:element参数,就是命令的jQLite(jQuery的子集)包装DOM成分。借使你在引入AngularJS从前引入了jQuery,那么那个成分就是jQuery成分,而不是jQLite成分。由于这么些因素已经被jQuery/jQLite包装了,所以大家就在拓展DOM操作的时候就不须求再利用
$()来进行李包裹装。

三:attrs参数,它富含了该指令所在成分的质量的规格参数对象。

5、scope[boolean or
object]品质,该属性是用来定义指令的scope的限制,默许情形下是false,也便是说该指令继承了父controller的scope,能够随便的运用父controller的scope里的天性,不过那样的话就会传染到父scope里的属性,那样是不可取的。所以大家能够让scope取以下八个值:true和{}。

当为true的时候,表示让Angular给指令创建3个连任于父scope的scope。

var myapp=angular.module('myapp',[])
    .controller('myctrl',['$scope', function ($scope) {
      $scope.color='red';
    }])
    .directive('hello', function () {
      return{
        restrict:'AECM',
        replace:true,
        template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
        scope:true,
        link: function (scope,elements,attrs) {
          elements.bind('click', function () {
            elements.css('background-color','blue');
          })
        }
      }
    })

此间大家为父scope定义了1个color的属性,并赋值为red,在hello指令的scope属性中,大家给了true,所以angular就为那些命令创设了一个卫冕于父scope的scope,然后在template属性中,我们用{{}}使用了从父scope中延续过来的color属性,所以按钮会是戊午革命的。

图片 3

当为{}的时候,表示创立三个割裂的scope,不会继续父scope的质量。然则在有些时候大家也要索要拜访父scope里的习性可能措施,那么大家应当怎么办吧。angular早就为我们想到了那或多或少,有以下的四个主意能够让我们记性上边的操作:

一:使用@实现单向绑定,假若大家只给scope的这么些{}值的话,那么地方代码的按钮的背景象将会是金棕的。图片 4,而一旦我们须求采纳父scope的color属性的时候,大家得以那样写:

scope{
    color:'@color'
}

<hello color="{{color}}"></hello>

此处有两点须要留意:① 、scope里的性质color代表的是模板{{}}那些表明式里面包车型大巴color,两者必须一致。② 、scope里的性格color的值,也便是@后边的color,表示的是下面的HTML成分里的品质color,所以那两边也必须一律,当那里的属性名和模板里表明式{{}}里面使用的称号一致的话,就可以总结掉@后边的本性名了,然后写成上面包车型地铁款式。

scope{
    color:'@'
}

从指令中scope的值能够观望,指令模板中的表达式{{}}里的color的针对的是眼下因素成分的color属性,这几个color属性的值就是父scope的习性color的值。父scope把她的color属性值传递给了当前成分的color属性,然后color属性又把值传递给了模版中表明式里的color,这些进程是单向的。

二:使用=完结双向绑定

    .directive('hello', function () {
      return{
        restrict:'AECM',
        replace:true,
        template:'<button style="background-color: {{color}}">click me</button>',
        scope:{
          color:'='
        },
        link: function (scope,elements,attrs) {
          elements.bind('click', function () {
            elements.css('background-color','blue');
            scope.$apply(function () {
              scope.color='pink';
            })
          })
        }
      }
    })

<hello color="color"></hello>
<input type="text" ng-model="color"/>

此处大家给指令的scope中的color属性和父scope中的color属性举行了双向绑定,并且给指令的link函数里,添加了三个单击事件,点击按钮会让按钮的水彩发生变化,并且改变指令scope的color属性的值,再给HTML页面中加了二个input标签,输出只怕输入父scope的color属性的值。这里有1个地方需求注意:当前成分的属性名的值不用再增加{{}}这么些表明式了,因为此地父scope传递的是一个实在的scope数据模型,而不是简简单单的字符串,所以那样大家就能够传递简单的字符串、数组、甚至复杂的指标给指令的scope。以往让大家来探视点击那个按钮将会爆发什么样。

图片 5此处大家能看出,按钮的颜色变成了豆灰的,表达点击让指令的scope的color属性产生了变动,从而导致按钮的颜料发生了变通。但是此地不光是按钮产生了变更,注意看,input表单里的值也变为了pink,这就认证父scope的color属性也时有爆发了扭转。
此外,再让我们来给input里面输入2个颜色,看看爆发什么变动。

图片 6,能够看看当我们在表单里输入其它一种颜色的时候,按钮的水彩也爆发了变化,那就表达指令的scope的color属性被更改了。综上大家得以窥见采取’=’完毕的是双向绑定。

三:使用&调用父scope里的章程

var myapp=angular.module('myapp',[])
    .controller('myctrl',['$scope', function ($scope) {
      $scope.color='red';
      $scope.sayhello= function () {
        alert('hello');
      };
    }])
    .directive('hello', function () {
      return{
        restrict:'AECM',
        replace:true,
        template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
        scope:{
          color:'=',
          sayhello:'&'
        },
        link: function (scope,elements,attrs) {
          elements.bind('click', function () {
            elements.css('background-color','blue');
            scope.$apply(function () {
              scope.color='pink';
            })
          })
        }
      }
    })

<hello color="color" sayhello="sayhello()"></hello>
<input type="text" ng-model="color"/>

此间大家也有四个地点供给专注:一 、我们不光要求在模板中运用ng-click指令,绑定上要调用的父scope中的方法,而且要在给当下成分添加二个属性,并且这性情情指向要调用的父scope的法门。② 、指令scope的属性sayhello、当前因素的质量sayhello、模板绑定的风浪措施名sayhello这三者要一致。那么如此大家就能够点击按钮,弹出二个会话框了。

图片 7

6、transclude[boolean]属性,那些本性用来让大家分明指令是还是不是足以涵盖自由内容

.directive('hello', function () {
      return{
        restrict:'AECM',
        replace:true,
        transclude:true,
        scope:{},
        template:'<div ng-transclude></div>',
      }
    })

<hello>
  hello
  {{color}}
</hello>

当他的值为true的时候,图片 8那是页面上输出的值。当为false的时候,页面中校会是空手的。那里有二个地点须要注意,正是<span>{{color}}</span>,那里的color是父scope里的color。并不是命令里的scope的color属性。

7、compile[function]参数,该方法有七个参数element,attrs,第3个参数element指指令所在的元素,第四个attrs指成分上授予的参数的规格列表。那里大家也有个地方需求专注:compile
函数不可能访问 scope,并且必须重返八个 link 函数。但是尽管没有设置 compile
函数,你能够健康地布署 link
函数,(有了compile,就不能够用link,link函数由compile重回)。

.directive('hello', function () {
      return{
        restrict:'AECM',
        replace:true,
        translude:true,
        template:'<button ng-click="sayhello()" style="background-color: {{color}}">click me</button>',
        scope:{
          color:'=',
          sayhello:'&'
        },
        compile: function (element,attrs) {
          return function (scope,elements,attrs) {
            elements.bind('click', function () {
              elements.css('background-color','blue');
              scope.$apply(function () {
                scope.color='pink';
              })
            })
          };
        }
      }
    })

今昔让大家来点击那么些按钮

图片 9我们发现,这里点击按钮之后发出的事体和前边用link属性的等同,那事实上是绝非多远的。

实质上在大部分的状态下,我们只供给接纳 link
函数。这是因为大多数的下令只须要考虑注册事件监听、监视模型、以及革新DOM等,这么些都足以在
link 函数中做到。 然而对于像 ng-repeat 之类的通令,须求克隆和另行 DOM
成分多次,在 link 函数执行在此以前由 compile
函数来形成。那么为何大家须要三个分其余函数来达成生成进程,为啥不可能只利用一个?要应对好那一个难题,大家须要精通指令在Angular中是何等被编写翻译的!

八 、指令是哪些被编写翻译的

当大家的angular应用带领运转的时候,angular将会选拔$compile服务遍历DOM成分,在有着的命令都被辨认之后,将会调用指令的compile方法,再次来到3个link函数,然后将这几个link函数添加到稍后执行的
link
函数列表中,那个进度被叫作编写翻译阶段。像ng-repeat那样的授命,需求被重新克隆很频仍,compile函数只在编写翻译阶段被执行一回,并且复制那些模板,但是link
函数会针对每一个被复制的实例被实践。所以分开处理,让大家在性质上有一定的进步(这句话有点不老子@楚,笔者是从别的地点copy过来的。原著在此间http://blog.jobbole.com/62249/)。

9、controller[string or function]和require[string or
string[]]参数,当大家想要允许别的的通令和您的通令发出互相时,大家就需求使用
controller 函数。当另3个命令想要交互时,它需求证明它对您的一声令下
controller 实例的引用(require)。

.directive('hello', function () {
      return{
        scope:{},
        require:'^he',
        compile: function (element,attrs) {
          return function (scope,elements,attrs,cntIns) {
            cntIns.fn()
          };
        }
      }
    })
    .directive('he', function () {
      return {
        restrict:'AE',
        scope:{},
        controller: function ($scope, $compile, $http) {
          this.fn= function () {
            alert('hello');
          };
        }
      }
    })

<he>
  <hello color="color" sayhello="sayhello()"></hello>
</he>

当页面加载达成之后,会弹出八个对话框。

图片 10

好了上边便是自己那段时光学习angular,所领会到的一声令下的知识,就先写到那里了。

相关文章