AngularJS指令学习进阶

CrazyDogWang

2016-08-11

关注关注

一、前言

在AngularJS中指令尤为重要且内容庞多，固单独提炼出来，梳理一番。如有错误，请不吝讲解。

好了，言归正传，让我们一起走进Angular指令的世界。

在上篇文章的前言部分提到，Angular的核心就是对HTML标签的增强。我们用到的诸如ng-app、ng-controller等等这些都是属于Angular指令，具体点，它们为Angular内置的指令。

Angular不仅提供了内置指令，它还允许我们自定义指令，不然Angular就太low咯。

这也是本篇文章的核心：如何自定义指令。

二、自定义指令

Angular为我们提供了.directive()这个方法，来定义指令。

如下：

AngularJS指令学习进阶

正如上述代码所示，directive方法接受两个参数：name和factory_function。

--name嘛，即为指令的名字，供我们调用时使用；

--factory_function就是当我们调用指令时，指令的实际行为，并且factory_function通常返回一个对象，里面通过规定的设置项来定义指令。

那么自定义指令中，我们都可以操作哪些设置项呢？

如下：

var app = angular.module('myApp', []);
app.directive('myDirective', function(){
            
    return {
        restrict: 'EACM',//告诉AngularJS这个指令在DOM中以何种形式被声明，默认为A
        priority: Number,//优先级参数（值为数值），数值越大，优先级越高，默认为0
        terminal: Boolean,//true或者false，告诉AngularJS是(true)否(false)停止运行当前元素上比本指令优先级低的指令
        template: String or Template Function,//模板
        templateUrl: String,//模板URL
        replace: Boolean,//值为true,代表模板会替换掉调用该指令的元素
        scope: Boolean or Object,//指令作用域
        transclude: Boolean,//true,结合ng-transclude，在该指令中嵌入内容
        controller: String or function($scope, $element, $attrs, $transclude, otherInjectables){...},//指令控制器
        controllerAs: String,//用来设置控制器的别名
        require: String,//将控制器注入到其值所指定的指令中
        link: function(scope, element, attrs){...},
        compile: function(){}               
    };
});

代码稍长，请自行打开

针对如此众多的设置项，我们一同先挑几个常用且简单的设置项，感受感受吧。

--template & templateUrl--

template模板参数是可选的，其值可以是一段HTML文本，也可以是一个接受两个参数的函数。

注：如果template值为空，或者没有template设置项，那么不会覆盖嵌入在指令内部的元素，且当指令scope为false或者{…}时，内部元素的作用域共享外部父作用域；但，当指令scope为true时，内部元素的作用域就是继承自外部父作用域。

demo如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myModule">
        outterDirective:<input type="text" ng-model="name"/><br>
        <one>
            innerDirective: <input type="text" ng-model="name"/>
        </one>
        <script src="angular.js"></script>
        <script>
            var myModule = angular.module('myModule', []);
            myModule.directive('one', function(){
                return {
                    scope: false,
                    restrict: 'E'
                }
            });
        </script>
    </body>
</html>

scope为false

效果图如下：

AngularJS指令学习进阶

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myModule">
        outterDirective:<input type="text" ng-model="name"/><br>
        <one>
            innerDirective: <input type="text" ng-model="name"/>
        </one>
        <script src="angular.js"></script>
        <script>
            var myModule = angular.module('myModule', []);
            myModule.directive('one', function(){
                return {
                    scope: {},
                    restrict: 'E'
                }
            });
        </script>
    </body>
</html>

scope为{...}

scope:{...}效果同上

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myModule">
        outterDirective:<input type="text" ng-model="name"/><br>
        <one>
            innerDirective: <input type="text" ng-model="name"/>
        </one>
        <script src="angular.js"></script>
        <script>
            var myModule = angular.module('myModule', []);
            myModule.directive('one', function(){
                return {
                    scope: true,
                    restrict: 'E'
                }
            });
        </script>
    </body>
</html>

scope为true

scope为true，效果图如下：

AngularJS指令学习进阶

假设，设置了template后，当我们调用指令后，它会呈现在页面中。下面我们就来具体看看。

1、当template值为一段HTML文本时，demo如下：

AngularJS指令学习进阶

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive></div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    template: '<div>\
                                   <h1>Hi everyone!</h1>\
                               </div>'
                };
            });
        </script>
    </body>
</html>

EntireCode

2、当template值为函数时，demo如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive title="Monkey"></div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    /*
                        值为函数时，接受两个参数tElement, tAttrs:
                            tElement:使用此指令的元素
                            tAttrs:实例的属性，它是一个由元素上所有的属性组成的集合，即对象
                    */
                    template: function(tElement, tAttrs){
                        var _html = '';
                        _html +='<div>' + 'Hi,'+tAttrs.title+'</div>';
                        return _html;
                    }
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

利用template可以在指令中自定义我们需要的模板，但是随着模板的体积（代码量）不断变大时，在指令中利用template就显得很糟糕，故而，使用templateUrl引用外部模板，是更好的选择。

--restrict--

restrict 是一个可选参数，它告诉AngularJS这个指令在DOM中以何种形式被调用。一共有四个选择且都为大写，不然没效果，默认为A（属性）。

A（属性）：

<div my-directive></div>

E（元素）：

<my-directive></my-directive>

C（类名）：

<div class="my-directive"></div>

M（注释）：

//以注释调用指令时，前后得有空格
<!-- directive:my-directive -->

这四个选项，可以单独使用，亦可混合使用。如：

restrict: ‘EA’就代表可以用元素或者属性调用指令

--replace--

replace是一个可选参数，值为Boolean类型，默认为false，代表模板会被当作子元素插入到调用此指令的元素内部。

如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive></div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    replace: false,
                    template: '<div>Monkey</div>'
                };
            });
        </script>
    </body>
</html>


代码稍长，请自行打开

运行后，打开chrome调试器，结果如下：
 
--replace值为true，即模板会替换掉调用指令的元素，如下：


<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive></div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    replace: true,
                    template: '<div>Monkey</div>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

运行后，打开chrome调试器，结果如下：

AngularJS指令学习进阶

且，当值为true时，template会替代调用指令的元素，固template中的值，必须只包含一个根节点，不然会报错，如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive></div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    replace: true,
                    template: '<div>Monkey</div><h1>Dorie</h1>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

运行后，打开chrome调试器，报错如下：

--transclude--

transclude是一个可选参数，表示是否允许在指令中，嵌入内容。值为Boolean，默认值为false代表不允许在指令中嵌入内容，如果手动设置为true后，要结合ng-transclude指令使用，不然和false效果一样。

下面我们一起来编写两个demo具体看看。

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive>
            <span>需要嵌入内容</span>
        </div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    transclude: false,
                    template: '<div>指令内容</div>'
                };
            });
        </script>
    </body>
</html>

transclude为false

运行代码，打开chrome调试器得下：

AngularJS指令学习进阶

我们再来看看transclude:true的情况，将上述代码中的transclude的值改为true后，运行代码。

咦，我靠和上诉transclude:false的结果一样呢？

哦，对了，虽然我们将transclude的值设为true了，但是要结合ng-transclude指令嘛，不然，你让人家嵌入内容往哪插呢？

利用ng-transclude指令修改代码后，得下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        <div my-directive>
            <span>需要嵌入内容</span>
        </div>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('myDirective', function(){
                return {
                    transclude: true,
                    template: '<div>指令内容</div><div ng-transclude></div>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

运行代码，打开chrome调试器，得下：

AngularJS指令学习进阶

注：利用ng-transclude指令标记的元素中，不管有没有内容，都将等同于无内容情况。

咦，利用transclude嵌入的内容，它们有自己的作用域吗？如果有，那么它们的作用域继承谁呢，指令or外部作用域？

答案：利用ng-transclude嵌入的内容的同时，会创建一个属于自己的作用域，即子作用域，且继承自外部作用域，并非指令。

--scope--

scope参数是可选的，它是直接影响指令的作用域。该参数可以被设置为不同的三个值，分别代表三种不同的作用域，下面我们就来一一说明。

1、scope: false

当scope的值为false时，也就是默认状态，代表指令共享父作用域，即没有自己的作用域。

如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        Parent:<input type="text" ng-model="name"/>
        <directive-for-false></directive-for-false>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('directiveForFalse', function(){
                return {
                    restrict: 'E',
                    scope: false,
                    template: '<div>Child: \
                                  <input type="text" ng-model="name">\
                               </div>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

执行上述代码，效果图如下：

AngularJS指令学习进阶

2、scope: true

当scope的值为true时，代表指令会创建自己的作用域，且继承自父作用域。

如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        Parent:<input type="text" ng-model="name"/>
        <directive-for-true></directive-for-true>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('directiveForTrue', function(){
                return {
                    restrict: 'E',
                    scope: true,
                    template: '<div>Child: \
                                  <input type="text" ng-model="name">\
                               </div>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

执行上述代码，效果图如下：

AngularJS指令学习进阶

3、scope: {…}

当scope的值为对象时，代表指令会切断与外界的联系，创建一个隔离的作用域，既不继承于父作用域，也不准内嵌的指令继承于自己。

一起写个demo，感受下“隔离作用域”不继承于父作用域，如下：

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
        Parent:<input type="text" ng-model="name"/>
        <directive-for-obj></directive-for-obj>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('directiveForObj', function(){
                return {
                    restrict: 'E',
                    scope: {},
                    template: '<div>Child: \
                                  <input type="text" ng-model="name">\
                               </div>'
                };
            });
        </script>
    </body>
</html>

执行上述代码，效果图如下：

AngularJS指令学习进阶

至于“不准内嵌的指令继承于自己”，参考上面的--transclude--

那当我们将scope设置为对象后，就成了一个无人问津的作用域，这样非常适合我们写插件之类的，但，怎么与外界交互呢？

这就涉及到所谓的绑定策略啦。

如下：

scope的绑定策略
@	把当前属性作为字符串传递。你还可以绑定来自外层scope的值，在属性值中插入{{ }}即可。
=	与父scope中的属性进行双向绑定。
&	传递一个来自父scope的函数

下面，我们就针对上面的提示，逐个demo，感受体会下。

1、@策略

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
    
        <input type="text" ng-model="name"/>
        
        <directive-for-obj who="{{name}}" love="love Dorie"></directive-for-obj>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('directiveForObj', function(){
                return {
                    restrict: 'E',
                    scope: {
                        who:'@',
                        what: '@love'
                    },
                    template: '<div><input type="text" ng-model="who"/> {{what}}</div>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

效果图，如下：

AngularJS指令学习进阶

2、=策略

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
    
        <input type="text" ng-model="name"/>
        
        <directive-for-obj who="name" love="love Dorie"></directive-for-obj>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.directive('directiveForObj', function(){
                return {
                    restrict: 'E',
                    scope: {
                        who:'=',
                        what: '@love'
                    },
                    template: '<div><input type="text" ng-model="who"/> {{what}}</div>'
                };
            });
        </script>
    </body>
</html>

代码稍长，请自行打开

效果图，如下：

AngularJS指令学习进阶

3、&策略

AngularJS指令学习进阶

<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body ng-app="myApp">
    
        <input type="text" ng-model="name"/>
        
        <directive-for-obj who="name" love="love Dorie" greet="sayWhat(wt, whr)"></directive-for-obj>
        <script src="angular.js"></script>
        <script>
            var app = angular.module('myApp', []);
            app.run(function($rootScope){
                $rootScope.sayWhat = function(what, where){
                    alert('hello, '+what+' at '+where);
                }
            });
            app.directive('directiveForObj', function(){
                return {
                    restrict: 'E',
                    scope: {
                        who:'=',
                        what: '@love',
                        greet: '&'
                    },
                    template: '<div><input type="text" ng-model="who"/> {{what}}</div>\
                                <button ng-click="greet({wt: who, whr: who})">click</button>'
                };
            });
        </script>
    </body>
</html>

EntireCode

--controller--

controller参数可以是一个字符串或一个函数。

注：当设置为字符串时，会以该字符串的值为名字，到注册在应用中的控制器中查找，不管该指令的scope值是什么，如果应用中的控制器没有对应的控制器，则报错。

在控制器中，是的，控制器，包括了指令以及注册在应用中的，可以注入一些特殊的服务，供其使用，如下：

$scope

与指令元素相关联的当前作用域

$element

当前指令对应的元素

$attrs

当前元素的属性组成的对象，如：

属性对象为：

{

id: ‘nav’,

name: ‘Monkey’

}

并且，指令之间的控制器（controller）可以复用。

怎么复用呢？

这就需要结合下面将要介绍的require设置项啦。

--require--

require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。Require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数（link）的第四个参数。用法如下：

没有前缀	指令会在自身提供的控制器中进行查找，如果找不到任何控制器，则会抛出一个error
?	如果在当前的指令没有找到所需的控制器，则会将null传给link连接函数的第四个参数
^	如果在当前的指令没有找到所需的控制器，则会查找父元素的控制器
?^	综合前面?和^

一些AngularJS相关文章链接：

希望你喜欢，并分享我的工作~带你走近AngularJS系列：

带你走近AngularJS - 基本功能介绍 http://www.linuxidc.com/Linux/2014-05/102140.htm
带你走近AngularJS - 体验指令实例 http://www.linuxidc.com/Linux/2014-05/102141.htm
带你走近AngularJS - 创建自定义指令 http://www.linuxidc.com/Linux/2014-05/102142.htm

AngularJS 的详细介绍：请点这里
AngularJS 的下载地址：请点这里

angular

安科网

AngularJS指令学习进阶

CrazyDogWang

CrazyDogWang

相关推荐

聊聊技术选型 - Angular2 vs Vue2

快速入门Web前端开发的正确姿势

为什么Vue更符合这个时代的大势所趋？

js 调用 angularJs 的方法

浅谈web三大框架优缺点及适用场景之Angular框架

前端学习之angular项目的本地运行步骤

Angular中处理Http请求

angular9 如何增加 webpack配置并将px转换为rem

框架比较

electron && angular 构建桌面应用（二）

Angular单元测试之事件触发的实现

Angular学习系列八：调用服务方法

前端框架

抛弃所有，选择Angular的3个理由

web前端开发ReactJS，AngularJS, Vue.js优劣对比分析

总结下html、css的一些东西

前端如何入门面对传统的html，css，js，三大框架react，vue，angular？

Web前端三大架构React、Angular与Vue全面比较

前端架构React、Angular与Vue的终极比较

jquery与angular的交互

CrazyDogWang