自定义指令directive

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()">
    注意,属性的名字要用-将多个个单词连接。注意:在新创建指令的作用域对象中,使用属性的名字进行绑定时,要使用驼峰命名标准,比如下面的代码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容