当前位置： 首页 > news >正文

AngularJS指令开发（1）——参数详解

news 来源：原创 2024/4/19 18:00:58

费了不少时间泡在自己的Angular UI for mobile计划，但看来是要搁置一下。一个是因为最近公司项目紧，自己还要忙着考驾照，心力交瘁啊。当然，最重要的原因还是，在Angular的使用上，钻得越深，发现水越深，不得不停下来，重新整理一下知识点。

赶紧开始。

指令，很重要

AngularJS与JQuery最大的区别在哪里？我认为，表现在数据双向绑定，实质就是DOM的操作形式不一样。

  • JQuery通过选择器找到DOM元素，再赋予元素的行为；

  • 而AngularJS则是，将指令与DOM绑定在一起，再扩展指令的行为。

所以AngularJS开发最理想的结果就是，在页面HTML与CSS的设计时，设计工程师只需要关注指令的使用；而在背后的逻辑开发上，架构工程师则是不需要知道如何操作DOM，只需要关注指令背后的行为要如何实现就行；测试工程师也可以开发针对指令的单元测试。

指令就是DOM与逻辑行为的媒介，本质就是DOM绑定的独立逻辑行为函数。

指令难点在于参数

来看看都有哪些

angular.module('app', [])
.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. 描述指令或DOM本身特性的内部参数

  2. 连接指令外界、与其他指令或控制器沟通的对外参数

  3. 描述指令本身行为的行为参数

内部参数

  • restrict：String，E（元素）<my-directive></my-directive> A（属性，默认值）<div my-directive="expression"></div> C（类名）<div class="my-directive:expression;"></div> M（注释）<--directive:my-directive expression-->

  • priority: Number，指令执行优先级

  • template: String，指令链接DOM模板，例如“<h1>{{head}}</h1>”

  • templateUrl:String，DOM模板路径

  • replace: Boolean，指令链接模板是否替换原有元素，

对外参数——scope

scope参数非常重要，本应该是放到最后说明的，但是scope却是理解其他参数的关键，所以务必先跟大家说清楚。

scope参数的作用是，隔离指令与所在控制器间的作用域、隔离指令与指令间的作用域。

scope参数是可选的，默认值为false，可选true、对象{}；

  • false：共享父域

  • true：继承父域，且新建独立作用域

  • 对象{}：不继承父域，且新建独立作用域

false、true、{}三者对比

来看个例子

<body>
    <div ng-controller='parentCtrl'>
        <h3>指令scope参数——false、true、{}对比测试</h3>
        parent:
        <div>
            <span> {{parentName}}</span>
            <input type="text" ng-model="parentName" />
        </div>
        <br />
        <child-a></child-a>
        <br />
        <child-b></child-b>
        <br />
        <child-c parent-name="parentName"></child-c>
    </div>
    <!--t1指令模板-->
    <script type="text/html" id="t1">
        <div>
            <span>{{parentName}}</span>
            <input type="text" ng-model="parentName" />
        </div>
    </script>
    <script>
        var app = angular.module("app", []);

        app.controller('parentCtrl', function ($scope) {
            $scope.parentName = "parent";
        })

        //false：共享作用域
        app.directive('childA', function () {
            return {
                restrict: 'E',
                scope: false,
                template: function (elem, attr) {
                    return "false:" + document.getElementById('t1').innerHTML;
                }
            };
        });

        //true：继承父域，并建立独立作用域
        app.directive('childB', function () {
            return {
                restrict: 'E',
                scope: true,
                template: function (elem, attr) {
                    return "true:" + document.getElementById('t1').innerHTML;
                },
                controller: function ($scope) {
                    $scope.parentName = "parent";

                    //已声明的情况下，$scope.$watch监听的是自己的parentName
                    $scope.$watch('parentName', function (n, o) {
                        console.log("child watch" + n);
                    });

                    //$scope.$parent.$watch监听的是父域的parentName
                    $scope.$parent.$watch('parentName', function (n, o) {
                        console.log("parent watch" + n);
                    });
                }
            };
        });

        //{}：不继承父域，建立独立作用域
        app.directive('childC', function () {
            return {
                restrict: 'E',
                scope: {},
                template: function (elem, attr) {
                    return "{}:" + document.getElementById('t1').innerHTML;
                },
                controller: function ($scope) {
                    console.log($scope);
                }
            };
        });

    </script>
</body>

false参数

本质：子域与父域共享作用域。
特点：父域修改parentName的同时，指令绑定的parentName的元素会被刷新。

clipboard.png

反之，指令内部parentName被修改时，父域的parentName同样会被刷新。

clipboard.png

true参数

本质：子域继承父域，并建立独立作用域。
特点：

1、在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。
指令在true参数下，建立了的scope，独立并隔离与父控制器的scope。

controller: function ($scope) {
    $scope.parentName = "parent";
}

clipboard.png

反之，指令中parentName变更，父域也不会发生变化。

clipboard.png

2、在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新
这种情况很多时候会被忽略，指令的scope没有声明对象时，其元素绑定的仍然是父域的对象。但，一旦指令中Input变更了，对应的独立scope也会自动声明该绑定对象，这就回到了第1种情况。

controller: function ($scope) {
    //$scope.parentName = "parent";
}

clipboard.png

然而，指令中parentName变更，父域是不会变化的；

clipboard.png

3、在指令已声明parentName的情况下 ，在指令中监听父域parentName 的变化无效。但监听子域parentName的变化有效
独立子域scope，只能监听自己的，不能监听父域的。但通过 $scope.$parent可以监听父域。

controller: function ($scope) {
    $scope.parentName = "parent" ;

    //已声明的情况下，$scope.$watch监听的是自己的parentName
    $scope.$watch( 'parentName' , function (n, o) {
        console.log("child watch" + n);
    });

    //$scope.$parent.$watch监听的是父域的parentName
    $scope.$parent.$watch( 'parentName' , function (n, o) {
        console.log("parent watch" + n);
    });
}

clipboard.png

4、在指令未声明parentName的情况下 ，在指令中监听父域parentName的变化有效。
这里就不解释了，参考第2点，大家可以动手试一下。

controller: function ($scope) {
    //$scope.parentName = "parent";

    //未声明的情况下，$scope.$watch监听的是父域的parentName
    $scope.$watch('parentName' , function (n, o) {
        console.log("child watch" + n);
    });
}

对象{}参数

本质：子域不继承父域，并建立独立作用域。
特点：

1、当scope对象为空对象时，无论是父域parentName，还是指令子域parentName发生变更，都不会影响到对方。
原理很清楚，就是指令建立的独立作用域，与父域是完全隔离的。

scope: {}

clipboard.png

2、当scope对象为非空对象时，指令会将该对象处理成子域scope的扩展属性。而父域与子域之间传递数据的任务，就是可以通过这块扩展属性完成。

<div ng-controller='parentCtrl'>
    parent:
    <p><span>{{name}}</span><input type="text" ng-model="name" /></p>
    <p><span>{{sexy}}</span><input type="text" ng-model="sexy" /></p>
    <p><span>{{age}}</span><input type="text" ng-model="age" /></p>
    <br />

    <!--特别注意：@与=对应的attr，@是单向绑定父域的机制，记得加上{{}}；&对应的attrName必须以on-开头-->
    <child-c my-name="name" my-sexy-attr="sexy" my-age="{{age}}" on-say="say('i m ' + name)"></child-c>
</div>

<!--t1指令模板-->
<script type="text/html" id="t1">
    <div>
        <span>{{myName}}</span>
        <input type="text" ng-model="myName" />
    </div>
    <div>
        <span>{{mySexy}}</span>
        <input type="text" ng-model="mySexy" />
    </div>
    <div>
        <span>{{myAge}}</span>
        <input type="text" ng-model="myAge" />
    </div>
</script>

<script>
    var app = angular.module("app", []);

    app.controller('parentCtrl', function ($scope) {
        $scope.name = "mark";
        $scope.sexy = "male";
        $scope.age = "30";
        $scope.say = function (sth) {
            alert(sth);
        };
    })

    app.directive('childC', function () {
        return {
            restrict: 'E',
            scope: {
                myName: '=',
                mySexy: '=mySexyAttr',
                myAge: '@',
                onSay: '&'
            },
            template: function (elem, attr) {
                return "{}:" + document.getElementById('t1').innerHTML;
            },
            controller: function ($scope) {
                console.log($scope.myName);
                console.log($scope.mySexy);
                console.log($scope.myAge);
                $scope.onSay();
            }
        };
    });

</script>

@（or @Attr）绑定策略——本地作用域属性，使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量。（单向引用父域对象）

<child-c my-age="{{age}}"></child-c>

ps：@ 是单向绑定本地作用域，记得加上{{}}

scope: {          
     myAge: '@',
}

clipboard.png

= （or =Attr）绑定策略——双向绑定：通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。就像普通的数据绑定一样，本地属性会反映出父数据模型中所发生的改变。（双向引用父域对象）

<child-c onSay="name"></child-c>

ps：=策略不需要加上{{}}进行绑定

scope: {          
     myName: '=',
}

clipboard.png

& （or &Attr）绑定策略——通过&符号可以对父级作用域进行绑定，以便在其中运行函数。（调用父域函数）

<child-c on-say="say('i m ' + name)"></child-c>

ps：&对应的attrName必须以on-开头

scope: {          
     onSay: '&',
}

父域绑定调用函数及传参


app.controller('parentCtrl', function ($scope) {
     $scope.say = function (sth) {
         alert(sth);
     };
})

clipboard.png

ps特别注意：@与=对应的attr，；

<child-c my-name="name" my-sexy-attr="sexy" my-age="{{age}}" on-say="say('i m ' + name)"></child-c>

总结下来，scope扩展对象，既能够解耦父域与子域共域的问题，也能够实现指令与外界通讯的问题，是Angular开发指令化模块化的重要基础。在往后的章节，我会向大家介绍指令化开发的更多实例。

对外参数——require

scope是指令与外界作用域通讯的桥梁，而require是指令与指令之间通讯的桥梁。这个参数最大的作用在于，当要开发单指令无法完成，需要一些组合型指令的控件或功能，例如日期控件，通过require参数，指令可以获得外部其他指令的控制器，从而达到交换数据、事件分发的目的。

使用方法：require: String or Array——String值为引入指令名称，并且有两个寻找指令策略符号‘？’与‘^’；Array数组则为多个外部指令名称。

在link函数第4个参数ctrl中获取注入外部指令的控制器，如果require为String，ctrl为对象，如果require是数组，ctrl为数组。

require: '^teacher1',
link: function ($scope, $element, $attrs, ctrl) {
    //ctrl指向teacher1指令的控制器
}

？策略——寻找指令名称，如果没有找到，link函数第4个参数为null；如果没有？，则报错。

clipboard.png

^ 策略——在自身指令寻找指令名称的同时，向上父元素寻找；如果没有^，则仅在自身寻找。
如下例子，指令studentA向上可以找到指令teacher及自身，但是不能找到相邻兄弟的student-b。

<div teacher>
    <student-a></student-a>
    <student-b></student-b>
</div>

完整例子

<body>
    <div teacher>
        {{name}}
        <student-a></student-a>
        <student-b></student-b>
    </div>
    <script>
        var app = angular.module("app", []);

        //studentA——require指向父级指令teacher
        app.directive('studentA', function () {
            return {
                require: '?^teacher',
                scope: {},
                template: '<div>A`s teacher name: <span>{{teacherName}}</span></div>',
                link: function ($scope, $element, $attrs, ctrl) {
                    //获取teacher指令控制器，并调用其方法sayName()
                    $scope.teacherName = ctrl.sayName();
                }
            };
        });

        //studentB——require指向父级指令teacher，及指令studentA
        //但是，由于不能获得兄弟，也没有采取？策略，导致报错
        app.directive('studentB', function () {
            return {
                require: ['?^teacher', 'studentA'],
                scope: {},
                template: '<div>B`s teacher name: <span>{{teacherName}}</span></div>',
                link: function ($scope, $element, $attrs, ctrl) {
                    $scope.teacherName = ctrl.sayName();
                }
            };
        });

        app.directive('teacher', function () {
            return {
                restrict: 'A',
                controller: function ($scope) {
                    $scope.name = "Miss wang";

                    //扩展控制器的方法sayName，目的是让外部内获取控制器内部数据
                    this.sayName = function () {
                        return $scope.name;
                    };
                }
            };
        });
    </script>
</body>

clipboard.png

既然require可以获取外部指令，那Angular原生指令应该也是能够获取。其中最广泛应用的就是require: 'ngModel'，关于ngModel在自定义指令上的应用，留待下回实例中再跟大家深入讨论。

行为参数——link与controller

为什么要把link与controller两个参数放到一起？
因为很多童鞋会把它们错误地混淆使用，包括我自己。

link与controller都是描述指令行为的参数，但它们是要描述的行为是完全不同的类型。

controller语法 controller：String or Function

controller本身的意义就是赋予指令控制器，而控制器就是定义其内部作用域的行为的。

所以controller要描述的是：指令的作用域的行为。

//指向匿名控制器
controller: function ($scope) {
},
//指向控制器mainCtrl
controller: "mainCtrl"

link语法 link：String Or Function

link名称是链接函数，啥意思，好像挺难理解。所以在解释链接函数之前，先要说一下Angular的初始化对于指令究竟做了什么。

Angular在刚从HTTP Response接收静态素材之初，会首先去分析母页HTML中有哪些原生指令或自定义指令，然后再去加载指令的template模板HTML，而template模板中又去加载自己的指令模板，如此类推，直到Angular找到了所有的指令及模板，形成模板树，并返回模板函数，提供给下一阶段进行数据绑定。

<body>
    <stu1 ></ stu1>
    <script >
        var app = angular.module("app" , []);

        app.directive( 'stu1' , function () {
            return {
                restrict: 'E' ,
                template: "<p>1</p><stu2></stu2>" ,
                link: function (scope) {
                    console.log( 'stu1 running' );
                }
            };
        });

        app.directive( 'stu2' , function () {
            return {
                restrict: 'E' ,
                template: "<p>2</p><stu3></stu3>" ,
                link: function (scope) {
                    console.log( 'stu2 running' );
                }
            };
        });

        app.directive( 'stu3' , function () {
            return {
                restrict: 'E' ,
                template: "<p>3</p>" ,
                link: function (scope) {
                    console.log( 'stu3 running' );
                }
            };
        });

    </script >
</ body>

console output

stu3 running
stu2 running
stu1 running

clipboard.png

注意以上例子，在第一个断点stu3 running的时候，1 2 3 三个模板都渲染完成了。然后从最根部的stu3的link函数开始，依次执行stu 3 stu2 stu1的link函数。

简单来说就是：

  1. 加载模板，形成DOM模板树

  2. @@@@

  3. 数据绑定

@@@@是啥？没错，就是link链接函数，它会在形成模板树之后，在数据绑定之前，从最底部指令开始，逐个指令执行它们的link函数。

在这个时间节点的link函数，操作DOM的性能开销是最低，非常适合在这个时机执行DOM的操作，例如鼠标操作或触控事件分发绑定、样式Class设置、增删改元素等等。

所以link就是描述指令元素操作行为。

link: function (scope, element, attr, ctrl) {

    element.bind("click", function () {
        console.log("绑定点击事件");
    });

    element.append("<p>增加段落块</p>");

    //设置样式
    element.css("background-color", "yellow");

    //不推荐，在link中赋予scope行为
    scope.hello = function () {
        console.log("hello");
    };
}

同理，在link中定义$scope行为是不推荐的。

这样想想，对于controller与link，就明白了。但还有一个问题，它们俩的执行顺序是？答案是先controller，后link。

放到全局顺序就是：

  1. 执行controller，设置各个作用域scope

  2. 加载模板，形成DOM模板树

  3. 执行link，设置DOM各个行为

  4. 数据绑定，最后scope绑上DOM

例子

    <div student>
        {{name }}
    </div>
    <script>
        var app = angular.module("app", []);

        app.directive('student', function () {
            return {
                restrict: 'A',
                controller: function ($scope) {
                    $scope.name = "tgor";

                    console.log('controller running');
                },
                link: function (scope, el) {
                    el.append("<p>hello</p>");

                    console.log('link running');
                }
            };
        });

    </script>

clipboard.png

总结

总结就是不想总结，还有compile、controllerAs……没有讲。写得累死，希望能给大家一些帮助，同时也可以将自己的错误暴露出来，望大家指正。
下一节，会跟大家分享一下指令在实战中的一些实例。

end

相关文章：

  • [安卓] 15、用NFC解锁手机并自动打开应用
  • Delphi、C#之父Anders Hejlsberg首次访华 推广TypeScript
  • JavaScript 数据类型
  • code
  • Service-stack.redis 使用PooledRedisClientManager 速度慢的原因之一
  • [Linux] - 定时任务crontab
  • 30分钟让你了解MongoDB基本操作（转）
  • There is already an open DataReader associated with this Command which must be closed first
  • 部署Exchange2013
  • Windows server 2008 R2配置路由和***
  • 业务
  • OK335x mksd.sh hacking
  • c#获取url请求的返回值（转）
  • ios开发 xcode6以上安装Alcatraz管理插件
  • 部署与管理ZooKeeper
  • 【知识碎片】第三方登录弹窗效果
  • 30秒的PHP代码片段（1）数组 - Array
  • ECMAScript 6 学习之路 （ 四 ） String 字符串扩展
  • el-input获取焦点 input输入框为空时高亮 el-input值非法时
  • JDK 6和JDK 7中的substring（）方法
  • js中的正则表达式入门
  • SOFAMosn配置模型
  • spring学习第二天
  • 翻译--Thinking in React
  • 关于List、List?、ListObject的区别
  • 解析带emoji和链接的聊天系统消息
  • 前嗅ForeSpider教程：创建模板
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 吐槽Javascript系列二：数组中的splice和slice方法
  • 一个完整Java Web项目背后的密码
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 优化 Vue 项目编译文件大小
  • 智能合约Solidity教程-事件和日志（一）
  • 3月27日云栖精选夜读 | 从 “城市大脑”实践，瞭望未来城市源起 ...
  • HanLP分词命名实体提取详解
  • ＃在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • （+4）2.2UML建模图
  • (13)[Xamarin.Android] 不同分辨率下的图片使用概论
  • (22)C#传智:复习,多态虚方法抽象类接口,静态类,String与StringBuilder,集合泛型List与Dictionary,文件类,结构与类的区别
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • （7）STL算法之交换赋值
  • （C语言）输入一个序列，判断是否为奇偶交叉数
  • （附源码）springboot炼糖厂地磅全自动控制系统 毕业设计 341357
  • （附源码）ssm考生评分系统 毕业设计 071114
  • （附源码）基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • （论文阅读11/100）Fast R-CNN
  • （论文阅读22/100）Learning a Deep Compact Image Representation for Visual Tracking
  • (三分钟了解debug)SLAM研究方向-Debug总结
  • (太强大了) - Linux 性能监控、测试、优化工具
  • （转）EOS中账户、钱包和密钥的关系
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • ***检测工具之RKHunter AIDE
  • **PHP分步表单提交思路（分页表单提交）
  • ./configure,make,make install的作用(转)
  • .equals()到底是什么意思？