AngularJSAngularJS中的吩咐

说到AngularJS,我们第一想到的大致也便是双向数据绑定和指令系统了,这两头为是AngularJS中不过吸引人之地方。双向数据绑定呢,感觉没什么好说的,那么今天咱们虽来大概的议论下AngularJS这个框架的指令系统,本人也是初学,查阅了一部分素材,要是出局部游说的不好的地方,万望指出。

指令作为AngularJS中最为关键之片,所以这框架本身也是于带了比较多之的命令,但是当支付被,这些指令通常不可知满足我们的消,所以我们啊是得由定义有命的。那么一个AngularJS指令在HTML代码中可出四种植表现形式:

1、作为一个新的HTML元素来使用。

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

2、作为一个要素的性质来行使

<div hello></div>

3、作为一个素的近乎来用

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

4、作为注释来以

<!--directive: hello -->

瞩目这里发生一个圈套,就是于“directive:
hello”这个的后面要发一个空格,不然的话是从未有过力量的,同时引进注释的不二法门的尚是少用,如果无要是追求高大上,那就算随性吧。既然指令发出以上四栽表现形式,那么具体他是怎么来定义的啊?

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

方就是定义一个下令最简便易行的代码了,没有之一。在面的代码中,directive()这个法定义了一个初的指令,该法发生三三两两个参数,第一个’hello’就是规定指令的讳也hello,第二只参数是返回指令对象的函数。那么当面的代码中,该函数根本使用了少单特性来定义之hello指令:

1、restrict[string]其一特性,主要是因此来规定指令在HTML代码中好行使啊表现形式。A代表属性、E代表元素、C代表类、M代表注释。实际情形屡遭我们一般用AE这片栽方法。

2、template[string or
function]以此特性,规定了命被Angular编译和链接(link)后生成的HTML标记,这个特性可以略到仅仅发一个HTML文以以其间,也可专程复杂,当该属性的值为function的上,那么该法返回的便是代表模板的字符串,同时也得于内部用{{}}这个表达式。

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

然而在相似情况下,template这个特性都见面叫templateUrl取代掉,用其来针对一个表面的公文地点,所以我们便将模版放在外部的一个HTML文件中,然后以templateUrl来乘为他。

在概念指令的时候,除了上述两只极端基础的性能外,我们还会见动用及外的慌多属性,那么下我们不怕来挨家挨户的说下:

1、priority[number]特性,这个特性是来确定自定义之命令的先期级的,当一个DOM元素上面来一个之上之通令的时刻,就用去于指令的优先级了,优先级赛的吩咐先实行。这个优先级就是之所以来以尽令的compile函数前,先排序的,那么关于compile这个函数,我们会于底下细的游说下。

2、terminal[boolean]属性,该参数用来定义是否终止当前因素上比本指令优先级低之一声令下,如果值也true,就是例行情况,按照先级高低之次第来实行,如果设置为false,就无会见尽时元素上比本指令优先级低的授命。

3、replace[boolean]性能,这个特性用来确定生成的HTML内容是否会见交替掉定义是命令的HTML元素。当我们将该属性的值设为true的当儿,打开控制台看看您晤面发现是命令生成的因素会是这么的:

AngularJS 1

当我们安为false的下会是这般的:

AngularJS 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给指令创建一个继往开来给父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定义了一个color的属性,并赋值为red,在hello指令的scope属性中,我们叫了true,所以angular就也夫命令创建了一个蝉联给父scope的scope,然后于template属性中,我们之所以{{}}使用了由父scope中连续过来的color属性,所以按钮会是红的。

AngularJS 3

当也{}的时节,表示创建一个隔离的scope,不见面持续父scope的属性。但是以一些时候我们也只要要拜访父scope里之性或者措施,那么我们理应怎么惩罚为。angular早就为咱想到了即或多或少,有以下的老三单艺术可以吃我们记性上面的操作:

一致:使用@实现单向绑定,如果我们只被scope的这{}值的言语,那么地方代码的按钮的背景色将会晤是灰色的。AngularJS 4,而一旦我们要用父scope的color属性的上,我们好这样形容:

scope{
    color:'@color'
}

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

此处来零星接触得专注:1、scope里之性质color代表的凡模板{{}}这个表达式里面的color,两者必须一致。2、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属性的价值。这里来一个地方需要注意:当前因素的属性名的值不用再行加上{{}}这个表达式了,因为此地父scope传递的是一个诚实的scope数据模型,而未是简单的字符串,所以这么咱们就算可以传递简单的字符串、数组、甚至复杂的靶子吃指令的scope。现在被我们来看望点击是按钮将会见发啊。

AngularJS 5此我们能够来看,按钮的颜料变成了粉红之,说明点击让指令的scope的color属性发生了变化,从而导致按钮的颜料有了转变。但是此地不仅是按钮发生了变动,注意看,input表单里的价值吗成了pink,这就是证明父scope的color属性也时有发生了扭转。
另外,再让咱们来为input里面输入一个颜色,看看发生什么变化。

AngularJS 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"/>

此我们啊闹半点独地方得专注:1、我们不仅要以模板被运用ng-click指令,绑定上使调用的父scope中之方法,而且若当为当下因素添加一个属性,并且是特性指向要调用的父scope的点子。2、指令scope的习性sayhello、当前元素的特性sayhello、模板绑定的波方名sayhello这三者要一律。那么这样咱们不怕得点击按钮,弹出一个会话框了。

AngularJS 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的上,AngularJS 8立即是页面上输出的价。当也false的时节,页面上拿会是空荡荡的。这里有一个地方得注意,就是<span>{{color}}</span>,这里的color是父scope里的color。并无是命令里之scope的color属性。

7、compile[function]参数,该办法来少数单参数element,attrs,第一单参数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';
              })
            })
          };
        }
      }
    })

本受咱来点击是按钮

AngularJS 9咱俩发现,这里点击按钮后发生的工作以及前边用link属性的同等,这实则是尚未稍微距离之。

实际上以多数的情状下,我们无非待以 link
函数。这是盖多数底一声令下就待考虑注册事件监听、监视模型、以及更新DOM等,这些都得以于
link 函数中好。 但是对于像 ng-repeat 之类的通令,需要克隆和还 DOM
元素多次,在 link 函数执行前由于 compile
函数来成功。那么为什么咱们要简单独分别的函数来就生成过程,为什么非克独行使一个?要对好这个题材,我们要知道指令在Angular中凡哪些为编译的!

8、指令是怎样吃编译的

当我们的angular应用引导启动之时,angular将见面使$compile服务遍历DOM元素,在具有的命都受识别后,将会晤调用指令的compile方法,返回一个link函数,然后以这个link函数添加至稍后推行之
link
函数列表中,这个历程让称之为编译阶段。像ng-repeat这样的通令,需要给重新克隆很频繁,compile函数只于编译阶段于实践同一蹩脚,并且复制这些模板,但是link
函数会针对每个被复制的实例被实践。所以分开处理,让我们于性质达到发生一定的增高(这词话来硌未极端理解,我是于别的地方copy过来的。原文于这边http://blog.jobbole.com/62249/)。

9、controller[string or function]和require[string or
string[]]参数,当我们怀念如果允许其他的下令与而的命令发出相互时,我们就是得采用
controller 函数。当其他一个发令想只要相互时,它需要声明其对你的命
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>

当页面加载了后,会弹来一个对话框。

AngularJS 10

吓了地方就是自顿时段时日攻读angular,所了解及之通令的学问,就先行勾勒到此处了。

相关文章