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中很重要的一部分。

  还没有写完,下班在写

时间: 2024-10-11 10:42:59

AngularJs指令(一)的相关文章

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin

angularjs指令中的compile详解

篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的

JavaScript强化教程——AngularJS 指令

本文为 H5EDU 机构官方 HTML5培训 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 完整的指令内容可以参阅 An

angularjs 指令—— 绑定策略(@、=、&amp;)

angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h

AngularJS 指令

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许自定义指令. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 实例 <div ng-app="" ng-init=&quo

AngularJS指令

AngularJS指令 通过指令的心属性来扩展HTML. AngularJS指令是扩展的HTML属性,带有前缀ng-. ag-app指令初始化一个AngularJS应用程序. ng-init指令初始化应用程序数据. ng-model指令把元素值绑定到应用程序,如输入域的值. <div ng-app="" ng-init="name='hello world'"> <div><input type="text" ng-

AngularJS 指令 表达式 应用

AngularJS 指令 AngularJS 指令是以 ng 作为前缀的 HTML 属性. ng-app 指令 ng-app 指令定义了 AngularJS 应用程序的 根元素. ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序. 稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块. ng-model 指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. ng-model 指令也可以: 为应用程序数据

AngularJS 指令应用

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. <div ng-app="" ng-init="firstName='John'"> <p&g

【转】angularjs指令中的compile与link函数详解

这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令