AngularJs指令(一)

  AngularJs应用现在尤为流行了,谷歌都跟微软合作支持AngularJS2.0,这是一旦逆天了,说明AngularJs将来定。最近纪念跳槽,又重新拾起了AngluarJs(之前由缺乏项目以,一直还是效仿了不畏忘了),也写写复习的知识点,希望这次能够叫我本着AngularJs的知情还深切透彻。

文化概要

同一、什么是因令Directive

其次、指令的编译过程以及命名方式

第二、AngularJS自定义指令的部署参数

次、AngularJS的搁指令发出怎么样

 

啊是凭令Directive

  AngularJS指令使我们为此来扩充浏览器能力的艺之一。在DOM编译期间,和HTML关联着的命会于检测及,并且于实施。这令指令可以啊DOM指定行为,或者改变它。本质上虽是AngularJS扩展具有从定义功能的HTML元素的门道。

  AngularJS有同等效完整的、可扩大的、用来拉web应用开发的指令集,它让HTML可以生成成“特定领域语言(DSL)”。

命的编译过程与命名方式

  于初步于定义指令之前,我们发出必要了解一下指令在框架中之履流程。如下:

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

    你用判定这一点,因为咱们的沙盘必须是可为分析的HTML。这是AngularJS和那些“以字符串为根基要非因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,那么该令就见面于与一个DOM的指令集和丁最后被实践。任何其它“terminal”的授命也仍然会实行,因为同级的命顺序是尚未给定义的。

  作用域scope– 如果为定义成:

  那么即使见面吗当前下令创建一个初的作用域。如果起多单以和一个DOM上之命要求创建新作用域,那么就生一个新的会晤给创造。
这无异于开立新作用域的规则不适用于模板的到底节点,因为模板的到底节点总是会获得一个新的作用域。

    {} 对象哈希 –
那么一个初的“孤立的”作用域就会见让创造。这个“孤立的”作用域区别为一般作用域的地方在于,它不见面因为原型继承的法子一直接轨自父作用域。这对于开创而选用的零部件是怪有效的,因为可选用的机件一般不应该读或摹写父作用域的数目。
这个“孤立的”作用域使用一个目标哈希来代表,这个哈希定义了平多样本地作用域属性,
这些本地作用域属性是由父作用域中衍生出的。这些性主要为此来分析模板的价值。这个哈希的键值对是地方性为键,它的来也价值。

    @ 或 @attr –
将地面作用域成员成员和DOM属性绑定。绑定结果连续一个字符串,因为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 – 请求将其他一个控制器作为参数传入到目前链接函数。
这个要需要传递给求指令的控制器的讳。如果无找到,就见面触发一个谬误。请求的名可以增长下面两单前缀:

    ? – 不要碰发错,这就是一个可选的呼吁。
  ^ – 没找到的话,在父元素的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属性一样,只不过这里指示的是一个模板的URL。因为模板加载是异步的,所有编译和链接都见面等于及加载成功后重新实践。

  替换replace
如果让安装成true那么现在底要素会于模板替换,而不是叫插到元素被。

  编译模板transclude
将元素编译好,使得指令可以起来以它。一般景象下欲与ngTransclude指令一起下。
使用嵌入的益处在吃链接好书可以获取到预绑定在作用域上的函数。在一个突出的初始化过程被,widget会创造一个孤立的作用域,但是坐并无是里面一个子分子,而是立即孤立作用域的哥们儿成员。这使得widget可以来一个私房的状态,并且放置被绑定在父作用于上。

    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属性是一个布尔属性,不待开展赋值。通过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

相关文章