AngularJs指令(一)

  AngularJs应用现在愈来愈流行了,谷歌(谷歌)都与微软同盟辅助AngularJS2.0,那是要逆天了,表达AngularJs以后自然。近来想跳槽,又重新拾起了AngluarJs(在此以前由于缺乏项目采纳,平素都以学了就淡忘了),也写写复习的知识点,希望此次能让自家对AngularJs的敞亮更尖锐透彻。

知识概要

① 、什么是指令Directive

贰 、指令的编写翻译进程及命名格局

② 、AngularJS自定义指令的配备参数

2、AngularJS的嵌入指令有何

 

怎么着是指令Directive

  AngularJS指令使我们用来扩充浏览器能力的技艺之一。在DOM编写翻译时期,和HTML关联着的下令会被检查和测试到,并且被执行。那使得指令能够为DOM指定行为,或许变更它。本质上正是AngularJS扩张具有自定义成效的HTML成分的门道。

  AngularJS有一套完整的、可扩张的、用来援助web应用开发的指令集,它使得HTML能够转变成“特定领域语言(DSL)”。

一声令下的编译过程与命名方式

  在始发自定义指令以前,大家有要求驾驭一下限令在框架中的执行流程。如下:

  1.浏览器获得 HTML 字符串内容,解析获得 DOM 结构。

    你供给判定那点,因为我们的沙盘必须是可被分析的HTML。那是AngularJS和那1个“以字符串为底蕴而非以DOM元素为底蕴的”模板系统的分别之处。

  2.ng 引入,把 DOM 结构扔给 $compile 函数处理:
    ① 找出 DOM 结构中有变量占位符

    ② 匹配找出 DOM 中包括的有所指令引用

    ③ 把指令关联到 DOM

    ④ 关联到 DOM 的五个指令优先级排列

    ⑤ 执行命令中的 compile 函数(改变 DOM 结构,重返 link 函数)

    ⑥ 获得的持有 link 函数组成二个列表作为 $compile 函数的归来

  3. 实践 link 函数(连接模板的 scope)。

  通过调用链接函数来将模板与功力域链接起来。那会交替调用每一个下令的链接函数,让每贰个下令都能对DOM注册监听事件,和确立对成效域的的监听。这样结尾就形成了效能域的DOM的动态绑定。任何三个成效域的变更都会在DOM上展示出来。

  那里注意区分一下$compile和compile,前者是ng内部的编写翻译服务,后者是指令中的编写翻译函数,两者发挥效能的限量不一。compile和link函数休戚相关又有所差距。明白履行流程对前面的知情会有支持。

  精晓一下编写翻译函数与链接函数:

  编写翻译函数 – 编写翻译函数在命令中是很少的,
因为超过二分之一发令都只是为着处理相应的DOM成分实例,而不是改变模板DOM成分。考虑到品质难点,任何命令的实例见能被共享的操作都应该移到编写翻译函数中。

  链接函数
指令很少不带有链接函数,链接函数能够让指令对相应克隆成分注册事件,还足以将效用域中的内容复制到DOM中。

  指令的两种选用方式如下:

    作为标签:<my-dir></my-dir>

    作为质量:<span my-dir=”exp”></span>

    作为注释:<!– directive: my-dir exp –>

    作为类名:<span class=”my-dir: exp;”></span>

    关于采取以哪种格局指令,建议坚持不渝使用性质形式,因为它有较好的跨浏览器兼容。

    关于自定义指令的命名,我们是可以无限制命名的。注意,全体内置指令的命名空间都选取ng作为前缀。为了以防命名空间顶牛,不要在自定义指令前加ng前缀。此外二个需精通的地点,指令命名时用驼峰规则,使用时用-分割各单词。如:定义myDirective,使用时像这么:<my-directive>。也建议大家写指令时,统一以my-打头做好规范,易于区分。

AngularJS自定义指令的配置参数

myModule.directive('namespaceDirectiveName', function factory(injectables) {

        var directiveDefinitionObject = {

            restrict: string,//指令的使用方式,包括标签,属性,类,注释

            priority: number,//指令执行的优先级   如果有ng-init定义了,则它优先级最高

            template: string,//指令使用的模板,用HTML字符串的形式表示

            templateUrl: string,//从指定的url地址加载模板

            replace: bool,//是否用模板替换当前元素,若为false,则append在当前元素上

            transclude: bool,//是否将当前元素的内容转移到模板中

            scope: bool or object,//指定指令的作用域

            controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},//定义与其他指令进行交互的接口函数

            require: string,//指定需要依赖的其他指令

            link: function postLink(scope, iElement, iAttrs) {...},//以编程的方式操作DOM,包括添加监听器等

            compile: function compile(tElement, tAttrs, transclude){

                return: {

                    pre: function preLink(scope, iElement, iAttrs, controller){...},

                    post: function postLink(scope, iElement, iAttrs, controller){...}

                }

            }//编程的方式修改DOM模板的副本,可以返回链接函数

        };

        return directiveDefinitionObject;

});

  Directive Definition Object 指令定义对象标准解释:

  指令定义对象给编写翻译器提供了变化指令需求的细节。这么些指标的品质有:

  名称name – 当前成效域的名号,在登记是可选的。

  优先级priority
当一个DOM上有多少个指令时,有会须求钦赐指令执行的一一。
那几个优先级正是用来在实施命令的compile函数前先排序的。高优先级的先实施。
相同优先级的下令顺序没有被钦定何人先实施。

  终端terminal
即使被安装为true,那么该指令就会在同1个DOM的指令集和中最终被实践。任何别的“terminal”的指令也还是会履行,因为同级的通令顺序是不曾被定义的。

  作用域scope– 如若被定义成:

  那么就会为最近命令创制三个新的功用域。假若有八个在同三个DOM上的命令供给成立新成效域,那么只有二个新的会被创设。
这一创制新成效域的平整不适用于模板的根节点,因为模板的根节点总是会获得1个新的成效域。

    {} 对象哈希 –
那么叁个新的“孤立的”成效域就会被创设。这些“孤立的”成效域分裂于一般成效域的地点在于,它不会以原型继承的主意一直接轨自父功效域。那对于开创可选拔的零部件是充足有效的,因为可选择的机件一般不应有读或写父功用域的数额。
那一个“孤立的”成效域使用二个对象哈希来表示,那个哈希定义了一多元本地作用域属性,
这个地点成效域属性是从父作用域中衍生出来的。那几个属性首要用来分析模板的值。这么些哈希的键值对是当地属性为键,它的来源为值。

    @ 或 @attr –
将地面功能域成员成员和DOM属性绑定。绑定结果接二连三3个字符串,因为DOM的属性正是字符串。若是DOM属性的名字没有被钦点,那么就和本地属性名一样。比如说<widget
my-attr=”hello {{name}}”> 和功效域对象: { localName:’@myAttr’
}。当name值改变的时候,
成效域中的LocalName也会改变。那些name是从父功效域中读来的(而不是组件成效域)。

    = 或 =expression(表明式) –
在地面成效域属性和父效率域属性间建立三个双向的绑定。假诺没有点名父功能域属性名称,那就和地面名称相同。
比如 <widget my-attr=”parentModel”> 和功效域对象: {
localModel:’=myAttr’ },
本地属性localModel会反映父效率域中parentModel的值。localModel和parentModel的任一方改变都会影响对方。

    & 或 &attr –
提供了一种能在父成效域下进行表达式的方式。如若没有点名父效用域属性名称,这就和地面名称相同。
比如 <widget my-attr=”count = count + value”>和效率域对象:{
localFn:’increment()’
}。本地功效域成员localFn会指向一个increment表达式的函数包装。日常你能够通过那一个表达式从地点成效域给父效率域传值,
操作方法是将当地变量名和值得对应涉及传给这一个表明式的卷入函数。比如说,这些表明式是increment(amount),那么您就足以用调用localFn({amount:22})的艺术钦命amount的值。

  控制器controller
控制器的布局对象。这一个控制器函数是在预编写翻译阶段被执行的,并且它是共享的,其余指令能够经过它的名字得到(参考重视属性[require
attribute])。那就使得指令间可以并行沟通来增加本身的力量。会传递给这一个函数的参数有:

    $scope – 当前成分关联的成效域。
    $element – 当前因素
    $attrs – 当前因素的习性对象。
    $transclude –
模板链接功效前绑定到科学的沙盘成效域:function(cloneLinkingFn)。
  请求require – 请求将另三个控制器作为参数传入到近期链接函数。
这些请求要求传递被呼吁指令的控制器的名字。假如没有找到,就会接触一个荒谬。请求的名字能够添加上边七个前缀:

    ? – 不要触发错误,那只是3个可选的呼吁。
  ^ – 没找到的话,在父成分的controller里面也查找有没有。
  限制restrict
EACM中的任意一个之母。它是用来界定指令的扬言格式的。若是没有这一项。那就只允许行使质量方式的下令。

      E – 成分名称:<my-directive></my-directive>
      A – 属性: <div my-directive=”exp”> </div>
      C – 类名:<div class=”my-directive:
exp;”></div>
      M – 注释: <!– directive: my-directive exp –>
    模板template – 将近期的要素交替掉。
那些替换进程会自行将成分的习性和css类名添加到新因素上。越来越多细节请查考章节“创制widgets”。

    模板templateUrl –
和template属性一样,只不过那里提醒的是2个模板的U悍马H2L。因为模板加载是异步的,全体编写翻译和链接都会等到加载成功后再履行。

  替换replace
假若棉被服装置成true那么未来的成分会被模板替换,而不是被插入到成分中。

  编译模板transclude
将成分编写翻译好,使得指令能够初阶选用它。一般景况下供给和ngTransclude指令一起利用。
使用嵌入的利益在于链接好书能够获得到预绑定在成效域上的函数。在三个压倒元白的初步化进程中,widget会成立多个孤立的效率域,可是放到并不是中间叁个子分子,而是那孤立功用域的小兄弟成员。那使得widget能够有2个民用的地方,并且放置被绑定在父成效于上。

    true – 嵌入指令的始末。
    ’element’ – 嵌入整个因素,包含预先级较低的吩咐。
  编译compile – 那即是前面将要讲到的编写翻译函数。

  链接link
那就是背后将要讲到的链接函数。唯有没有提供编写翻译函数时才会用到那一个值。

  指令那块确实知识点相比多,也是angularJS中很要紧的一有的。

 

AngularJS内置指令

  全部的松手指令的前缀都为ng,不提出自定义指令使用该前缀,防止争论。
  首先从局地大规模的放到指令开头。
  先列出部分关键的停放指令,顺便简单说说功用域的题材。 

  ng-model
  将表单控件和日前成效域的性格举行绑定,这么解释就像是也不太正确。

  ng-init
  该指令被调用时会起始化内部成效域。

  ng-app
  每二次用AngularJS都离不开这么些命令,顺便说下$rootScope。
  注明了ng-app的因素会成为$rootScope的起源,而$rootScope是意义域链的根,平时证明在<html>你懂的。
  也便是说根下的效用域都得以访问它。
  可是,不建议过度施用$rootScope,免得全局变量满天飞,功用又差又难管。 

  ng-controller
  我们用那些命令在贰个DOM成分上装上controller。

  ng-disabled
  像那种借使出现则生效的属性,我们得以在AngularJS中经过表明式重回值true/false令其收效。
  禁止使用表单输入字段。

  ng-readonly
  通过表明式再次来到值true/false将表单输入字段设为只读

  ng-checked
  标准的checked属性是3个布尔属性,不须要展开赋值。通过ng-checked将有个别表明式同是出现checked属性进行绑定。

  ng-select

  ng-select能够对是还是不是出现option标签的selected属性举行绑定。

  ng-herf

  当使用当前成效域中的属性动态创设url时,应该用ng-href代替href

  ng-src

  angularJs会告诉浏览器呢在ng-src对应的表明式生效此前毫无伪装图像。

  ng-include

  使用ng-include能够加载、编写翻译包蕴外部HTML片段到如今的使用中。

  ng中的事件绑定相关指令

  ng-change    ng-click    ng-dbclick    ng-mouseenter    
 ng-mouseleave     ng-mousemove   ng-mouseover  ng-mouseup

相关文章