美文网首页
自定义指令directive

自定义指令directive

作者: 新许88 | 来源:发表于2019-08-21 14:41 被阅读0次
    angular.module('myApp', []).
    directive('myDirective', function () { 
        return { 
            restrict: String, 
            priority: Number, 
            terminal: Boolean, 
            template: String or Template Function: function (tElement, tAttrs) (...}, 
            templateUrl: String, 
            replace: Boolean or String, 
            scope: Boolean or Object, 
            transclude: Boolean, 
            controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, 
            controllerAs: String, 
            require: String, 
            link: function (scope, iElement, iAttrs) { ... }, 
            compile: // 返回一个对象或连接函数,如下所示:            
                function(tElement, tAttrs, transclude) {                 
                    return {                     
                        pre: function(scope, iElement, iAttrs, controller) { ... },                     
                        post: function(scope, iElement, iAttrs, controller) { ... }                 
                    }                 
                    // 或者                 
                    return function postLink(...) { ... }    
            }     
        }; 
    });
    

    1. scope

    scope的三种取值

    1. false(默认值):直接使用父scope。
    2. true:继承父scope,子作用域scope的proto指向了父作用域scope
    3. 对象{ }:创建一个新的“隔离”scope,但仍可与父scope通信
      隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。然而虽然说是“隔离”,但通常我们还是需要让这个子scope跟父scope中的变量进行绑定。绑定的策略有3种:@:单向绑定,外部scope能够影响内部scope,但反过来不成立=:双向绑定,外部scope和内部scope的model能够相互改变&:把内部scope的函数的返回值和外部scope的任何属性绑定起来
    1. false(默认值):直接使用父scope。
      比较“危险”。可以理解成指令内部并没有一个新的scope,它和指令以外的代码共享同一个scope。我们创建的指令继承了父作用域的一切属性和方法,这也使得在指令的模板中我们可以使用这些属性和方法。
      因为我们将scope的属性设置为false所以,我们创建的指令继承了父作用域的一切属性和方法,这也使得在指令的模板中我们可以使用这些属性和方法。

    2. true:从父作用域继承并创建一个新的作用域对象。
      子作用域scope的_proto_指向了父作用域scope
      内置指令ng-controller的作用,就是从父级作用域继承并创建一个新的子作用域。它会创 建一个新的从父作用域继承而来的子作用域。

    3. { }:创建一个新的“隔离”scope,当我们将scope的属性设置为{}时,我们可以做更多的事情。
      AngularJS最强的大的地方之一就是它可以构建组件,无论放在哪里都是可以使用的;这所以可以做到这些,不得不归功于指令的这个属性;当我们将scope设置为{}时,意味着我们创建的一个新的与父作用域隔离的新的作用域,这使我们在不知道外部环境的情况下,就可以正常工作,不依赖外部环境。所以隔离的scope,通常用于创建可复用的指令,也就是它不用管父scope中的model。
      我们使用了隔离的作用域,不代表我们不可以使用父作用域的属性和方法。我们可以通过向scope的{}中传入特殊的前缀标识符(即prefix),来进行数据的绑定。在创建了隔离的作用域,我们可以通过@,&,=引用应用指令的元素的属性。
      绑定的策略有3种:@、=、&
      1、@ 单项绑定的前缀标识符使用方法:在元素中使用属性,好比这样my-directive my-name="{{name}}">
      注意,属性的名字要用-将两个单词连接,因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
      注意,父作用域中修改绑定值会影响子作用域,但子作用域修改绑定的值不影响父作用域。
      2、= 双向数据绑定前缀标识符使用方法:在元素中使用属性,好比这样my-directive age="age">
      注意,数据的双向绑定要通过=前缀标识符实现,所以不可以使用{{}}。
      3、& 绑定函数方法的前缀标识符使用方法:在元素中使用属性,好比这样my-directive change-my-age="changeAge()">
      注意,属性的名字要用-将多个个单词连接。注意:在新创建指令的作用域对象中,使用属性的名字进行绑定时,要使用驼峰命名标准,比如下面的代码。

    相关文章

      网友评论

          本文标题:自定义指令directive

          本文链接:https://www.haomeiwen.com/subject/kvibsctx.html