angularjs开发指南阅读03

指令

Directive Definition Object 指令定义对象

name, priority, terminal, scope

重点scope

  1如果定义了,那么就会为当前指令创建一个新的作用域。如果有多个在同一个DOM上的指令要求创建新作用域,那么只有一个新的会被创建

  2{} 对象哈希 - 那么一个新的“孤立的”作用域就会被创建

    这个哈希定义了一系列本地作用域属性, 这些本地作用域属性是从父作用域中衍生出来的。这些属性主要用来分析模板的值。这个哈希的键值对是本地属性为键,它的来源为值。

      @ 或 @attr - 将本地作用域成员和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中的任意一个之母

模板template

  将当前的元素替换掉。 这个替换过程会自动将元素的属性和css类名添加到新元素上

模板templateUrl

  模板加载是异步的,所有编译和链接都会等到加载完成后再执行

替换replace

  被设置成true那么现在的元素会被模板替换,而不是被插入到元素中

编译模板transclude

  将元素编译好,使得指令可以开始使用它.一般情况下需要和ngTransclude指令一起使用

  在一个典型的初始化过程中,widget会创建一个孤立的作用域,但是嵌入并不是其中一个子成员,而是这孤立作用域的兄弟成员。

  这使得widget可以有一个私有的状态,并且嵌入被绑定在父作用于上。

      true - 嵌入指令的内容。

      'element' - 嵌入整个元素,包括优先级较低的指令

编译compile - 编译函数

   编译函数是用来处理需要修改模板DOM的情况的。因为大部分指令都不需要修改模板,所以这个函数也不常用

    ngTrepeat,这个是需要修改模板的

    ngView这个是需要异步载入内容的

    function compile(tElement, tAttrs, transclude) { ... }

    template element - 指令所在的元素。对这个元素及其子元素进行变形之类的操作是安全的

    template attributes - 这个元素上所有指令声明的属性,这些属性都是在编译函数里共享的

    transclude - 一个嵌入的链接函数function(scope, cloneLinkingFn)

    如果模板被克隆了,那么模版实例和链接实例可能不是同一个对象。

    所以在编译函数不要进行任何DOM变形之外的操作。 更重要的,DOM监听事件的注册应该在链接函数中做,而不是编译函数中

    可返回对象或者函数

       返回函数 - 等效于在编译函数不存在时,使用配置对象的link属性注册的链接函数。

       返回对象 - 返回一个通过prepost属性注册了函数的对象- 使你能更具体的链接函数的执行点。

链接link -链接函数。只有没有提供编译函数时才会用到这个值

  function link(scope, iElement, iAttrs, controller) { ... }

    链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的。

    它也是大部分指令逻辑代码编写的地方。

        scope - 指令需要监听的作用域。

        iElement - instance element - 指令所在的元素。只有在postLink函数中对元素的子元素进行操作才是安全的,因为那时它们才已经全部连接好

        iAttrs - instance attributes - 实例属性,一个标准化的、所有声明在当前元素上的属性列表

        controller - 控制器实例,如果至少有一个指令定义了控制器,那么这个控制器就会被传递

Pre-linking function 在子元素被链接前执行。不能用来进行DOM的变形

Post-linking function 所有元素都被链接后执行。可以操作DOM的变形

原文地址:https://www.cnblogs.com/jingwensophie/p/4778674.html