《用AngularJS开发下一代Web应用》指令学习笔记 -

bijian1013

浏览: 3238113 次
性别:
来自: 深圳

最近访客更多访客>>

seal1002

dy.f

godandghost

lovefiger

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

《用AngularJS开发下一代Web应用》指令学习笔记

博客分类：

AngularJS

angularJS directive

一.指令的作用：实现语义化标签

我们常用的HTML标签是这样的：

<div>
    <span>目录</span>
</div>

而使用AngularJS的directive（指令）机制，我们可以实现这样的东西

<tabset>
    <tab title='Home'>
        <p>Welcome home!</p>
    </tab>
    <tab title='Preferences'>
         <p>Content</p>
    </tab>
<tabset>

和JSP或者Struts等等框架里面的taglib功能一样，只不过这里是使用JavaScript来实现的。

二.简单实例

DirectiveStudy01.html

<html ng-app='app'>
    <body>
        <hello></hello>
    </body>
    <script src="lib/angular/angular.js"></script>
    <script src="directive/HelloDirect.js"></script>
</html>

HelloDirect.js

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<div>Hi there</div>',
        replace: true
    };
});

运行结果：

对于DirectiveStudy01.html里面的<hello>标签，浏览器显然是不认识的，它唯一能做的事情就是无视这个标签。那么，为了让浏览器能够认识这个标签，我们需要使用Angular来定义一个hello指令（本质上说就是自己来把<hello>替换成浏览器能识别的那些标准HTML标签）。

从运行结果可以看到，<hello>已经被<div>Hi there</div>这个标签替换掉了，这也是以上JS代码里面replace:true这行配置的作用，代码里面的template配置项当然就是我们要的div标签啦，至于restrict:'E'这个配置项的含义，请看下表：

当然，如果需要替换的HTML标签很长，显然不能用拼接字符串的方式来写，这时候我们可以用templateUrl来替代template，从而可以把模板写到一个独立的HTML文件中。

三.transclude(变换)

可以通过transclude属性将内容插入新的模板。当transcluden属性设置为true时，指令会删除原来的内容，使你的模板可以用ng-transclude指令进行重新插入。

DirectiveStudy02.html

<html ng-app='app'>
    <body>
        <div hello>Bob</div>
    </body>
    <script src="lib/angular/angular.js"></script>
    <script src="directive/HelloDirect02.js"></script>
</html>

HelloDirect02.js

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        template: '<div>Hi there <span ng-transclude></span></div>',
        transclude: true
    };
});

运行结果：

和第一个例子对比，这个例子的JS和HTML代码都略有不同，JS代码里面多了一个transclude: true，HTML代码里面在<hello>内部出现了子标签。

按照我们在第一个例子中的说法，指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好，如果我们自定义的标签内部出现了子标签，应该如何去处理呢？很显然，transclude就是用来处理这种情况的。

对于当前这个例子，transclude的作用可以简化地理解成：把<hello>标签替换成我们所编写的HTML模板，但是<hello>标签内部的内容保持不变。

很显然，由于我们没有加replace:true选项，所以<hello>标签还在，没有被替换掉。

四.compile和link函数

虽然插入模板的方式很有用，但是对于指令来说，真正有趣的工作发生在compile和link函数中。

compile和link这两个函数是根据Angular创建动态视图的两个处理阶段来命名的。从高层来看Angular的初始化过程，它们依次如下：

1.加载脚本

加载Angular库，并查找ng-app指令，从而找到应用的边界。

2.编译阶段

在这个阶段，Angular将会遍历DOM结构，标识出模板中注册的所有指令。对于每一条指令，它会根据指令定义的规则(template、replace、transclude等)来转换DOM结构，如果存在compile函数，则调用它。调用compile函数将得到一个编译好的template函数，它将会调用从所有指令中搜集而来的link函数。

3.连接阶段

为了让视图成为动态的，Angular会对每一条指令运行一个link函数。link函数的一般操作是在DOM或者模型上创建监听器，监听器会使视图和模型的内容随时保持同步。

总结来说，后两个阶段就负责转换模板的编译阶段，以及修改视图中数据的连接阶段。在以上内容中，指令中的compile和link函数的主要不同点在于，compile函数用来对模板自身进行转换，而link函数负责在模型和视图之间进行动态关联。作用域在连接阶段才会被绑定到编译之后的link函数上，然后再通过数据绑定技术，指令就变成了动态的。

出于性能方面的考虑，这两个阶段是分开处理的。compile函数仅仅在编译阶段运行一次，而link函数会执行很多次——对于指令的每个实例，link函数都会执行一次。例如，在指令的上一层标签里面使用了ng-repeat，这里你并不想调用compile函数，因为那样会导致对ng-repeat中的每一次遍历都进行一次DOM-walk(DOM遍历)。希望只编译一次，然后再连接。

当然，你需要知道compile和link函数之间的不同点以及它们各自的功能。对于你将编写的大多数指令来说，并不需要对模板进行转换，所以，大部分情况下只要编写link函数就可以了。

为了进行比较，再分别看一下compile和link函数的语法。对于compile函数，语法是这样的：

compile: function compile(tElement, tAttrs, transclude) {
    return {
       pre: function preLink(scope, iElement, iAttrs, controller) {...},
       post: function postLink(scope, iElement, iAttrs, controller) {...}
    }
}

对于link函数，是这样：

link: function postLink(scope, iElement, iAttrs) {...}

注意这里有一个不同点，即link函数会访问scope(作用域)对象，而compile不会。这是因为，scope对象在编译阶段还不存在。当然你也可以在compile函数中返回link函数，这些link函数仍然可以访问scope对象。

同时请注意，compile和link都会接收到对应DOM元素的引用以及元素的属性列表。这里的不同点是，compile函数会接收模板元素及其属性列表，所以函数形参带有一个t前缀；而link函数会接收到视图实例对象，视图实例是使用模板创建的，所以函数形参带有一个i前缀。

只有当一个指令位于其他指令内部，而外部指令会生成模板的多份拷贝时，这种差异性才会显得比较重要。ng-repeat指令就是一个很好的例子。

DirectiveCompileAndLink.html

<html ng-app='app'>
    <body ng-controller='MyController'>
        <div ng-repeat='thing in things'>
            {{thing}}.<hello></hello>
        </div>
    </body>
    <script src="lib/angular/angular.js"></script>
    <script src="directive/CompileAndLink.js"></script>
</html>

CompileAndLink.js

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
        restrict: 'E',
        template: '<span>Hi there</span>',
        replace: true
    };
});
appModule.controller('MyController',function($scope) {
    $scope.things = [1,2,3,4,5,6];
});

运行结果：

这里，compile函数只会被调用一次，而link函数的调用次数等于things中的元素个数——对于{{thing}}.<hello></hello>的每一份拷贝，它都会被调用一次。所以，如果对{{thing}}.<hello></hello>的每一份拷贝（实例）都有一些共同的东西需要修改，那么，出于效率方面的考虑，最好在compile函数里面来做这件事情。

你还会注意到，compile函数会接受一个transclude函数作为属性。如果你需要对内容进行变换，而简单的基于模板的变换并没有提供这种功能，那么，你可以在这里编写一个函数，使用程序的方式对内容进行变换。

最后，compile可以返回preLink和postLink函数，而link函数只会返回postLink函数。正如它的名称所表示的，preLink会在编译阶段之后、指令连接到子元素之前运行。类似的，postLink会在所有子元素指令都连接之后才运行。这就意味着，如果你需要修改DOM结构，你应该在postLink中来做这件事情，而如果在preLink中做这件事情会破环绑定过程，并导致错误。

五.扩展条实例Expander

我们经常需要在指令中访问scope对象，以便观察数据模型的值，当这些值发生变化时刷新UI。当你使用jQuery、Closure或其他类库来封装一些非Angular组件时，或者实现简单的DOM事件时，或者把一个Angular表达式传递给指令的属性然后执行时，都需要访问scope对象。

如果出于以上某种原因需要一个scope对象，那么scope对象的类型有以下三种选择：

1.指令对应的DOM元素上存在的scope对象。

2.可以创建一个新的scope对象，它继承了外层控制器的scope。在继承树中，位于当前scope对象上方的所有scope对象的值都可以被读取。对于DOM元素里面的任何其他指令，如果需要这种类型的scope，也可以共享这个scope，并且可以用它和树中其他scope进行通信。

3.使用独立的scope对象，它不会从父对象上继承模型的任何属性。当创建可复用的组件，并且需要把当前指令的操作和父scope隔离开时，你就需要使用这个选项。

可以使用以下配置语法来创建这些指令：

当创建独立scope时，默认情况是不可以访问父scope模型中的任何东西。但是，你可以指定把某些属性传递到你的指令中，你可以把这些属性名称看成函数的形参。

注意，虽然独立的scope不会继承模型的属性，但是它们仍然是父scope的孩子。与所有其他scope一样，它们带有一个指向父scope对象的$parent属性。

你可以通过传递属性名映射的方式把父scope中指定的属性传递给这个独立的scope。有三种方法可以在scope和父scope之间传递数据，我们把这三种方式叫做“绑定策略”，你还可以选择选择给属性名指定一个局部的别名。

不使用别名的语法形式为：

scope: {attributeName1: 'BINDING_STRATEGY',
        attributeName2: 'BINDING_STRATEGY',...
        }

使用别名的形式为：

scope: {attributeAlias: 'BINDING_STRATEGY' + 'templateAttributeName',
       ...
       }

绑定策略符号定义如下表所示：

下面通过一个具体例子来示范一下各用用法。例如，我们想要创建一个expander指令，它会显示一个很小的扩展条，点击的时候扩展条就会展开，显示额外的内容。

DirectiveExpander.html

<html ng-app='expanderModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="lib/angular/angular.js"></script>
        <link rel="stylesheet" type="text/css" href="css/ExpanderSimple.css"/>
    </head>
    <body>
        <div ng-controller='SomeController'>
            <expander class='expander' expander-title='title'>
                {{text}}
            </expander>
        </div>
    </body>
    <script src="directive/ExpanderSimple.js"></script>
</html>

ExpanderSimple.js

var expanderModule=angular.module('expanderModule', [])
expanderModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                 + '<div class="title" ng-click="toggle()">{{title}}</div>'
                 + '<div class="body" ng-show="showMe" ng-transclude></div>'
                 + '</div>',
        link : function(scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope) {
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});

ExpanderSimple.css

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

运行结果：

点击展开，效果如下：

我们先来看一看指令中的每一个选项分别会为我们做一些什么事情，如下所示：

如果觉得应该把把扩展条的标题定义在模板中，而不应该定义在数据模型中，那么你可以在scope的定义中使用字符串风格的属性，用@符号作为标志进行传递，示例如下：

scope: {title:'@expanderTitle'},

在模板中，我们可以使用下面这种方法达到同样的效果：

<expander class='expander' expander-title='Click me to expand'>
    {{text}}
</expander>

注意，在使用@策略时，我们仍然可以通过双花括号插值语法把title绑定到控制器scope上：

<expander class='expander' expander-title='{{title}}'>
   {{text}}
</expander>

六.扩展条实例Expander——操作DOM元素

可以向指令的link和compile函数传递iElement或tElement参数，这两个参数都是包装后的引用，它们都指向原始的DOM元素。如果你加载了jQuery库，那么它们就会指向经过jQuery包装之后的元素。

如果你不使用jQuery，那么这些DOM元素都位于Angular-native包装器jqLite中。jqLite是jQuery API的子集，在Angular中我们需要用它来创建所有东西。对于很多应用来说，只要使用这个轻量级API就可以实现所有你想做的事情了。

如果你需要直接访问原始的DOM元素，你可以使用element[0]来访问对象中的第一个元素。

在Angular文档中angular.element()部分，你可以看到目前能够支持的完整API列表，你可以使用angular.element()来创建包装在jqLite中的DOM元素。anuglar对象还带有addClass()、bind()、find()、toggleClass()等函数。当然，这些都是jQuery中常用的核心函数，只是Angular的实现代码更精致而已。

除了jQuery的API之外，元素还带有一些基于Angular的函数，如下所示。这些函数是否存在与你是否使用完整的jQuery库有关。

作为例子，重新实现一下扩展条的实例，新的实现方式不再借助于ng-show和ng-click指令，代码如下：

var expanderModule=angular.module('expanderModule', [])
expanderModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                 + '<div class="title">{{title}}</div>'
                 + '<div class="body closed" ng-transclude></div>'
                 + '</div>',
        link : function(scope, element, attrs) {
            var titleElement = angular.element(element.children().eq(0));
            var bodyElement = angular.element(element.children().eq(1));
            
            titleElement.bind('click', toggle);
            
            function toggle() {
            	bodyElement.toggleClass('closed');
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope) {
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});

从模板中删掉了ng-click和ng-show指令，作为替代，我们给title元素创建了一个jqLite元素，然后把toggle()函数绑定到它的click事件上作为回调，这样就能在用户点击扩展条title的时候执行必要的动作。在toggle()函数中，我们通过调用扩展条body元素上的toggleClass()方法来添加或者删除closed样式类。在toggleClass()函数中我们使用一个CSS样式类把元素设置为display:none，示例如下：

.closed {
    display: none;
}

PS：jQuery 属性操作-toggleClass() 方法

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

七.控制器及综合实例

要实现需要彼此通信的嵌套指令，可以使用控制器。<menu>需要知道内部<menu-item>元素的信息，这样它才能够正确地显示和隐藏它们。同样地，<tab-set>需要知道内部<tab>元素的信息；<grid-view>需要知道内部<grid-element>元素的信息。

如前所示，为了创建能够在指令之间进行通信的接口，你可以使用controller属性语法把控制器声明成指令的一部分：

controller: function controllerConstructor($scope, $element, $attrs, $transclude)

controller函数是通过依赖注入的，所以这里所列出的参数列表都是可选的，可以按照其他顺序将其列出，当然这些参数都具有某种潜在的用途。它们还是可用的服务子集。

通过require属性语法，其他指令可以把这个控制器传递给自已。require的完整形式如下：

require: '^?directiveName'

require字符串的解释如下表所示：

作为例子，我们来重写expander指令，让它可以用在一个"accordion"集合中。它会保证当你打开一个扩展条时，集合中的所有其他扩展条都会自动关闭掉。

Accordion.js

var expModule=angular.module('expanderModule',[])
expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                   + '<div class="title" ng-click="toggle()">{{title}}</div>'
                   + '<div class="body" ng-show="showMe" ng-transclude></div>'
                   + '</div>',
        link : function(scope, element, attrs, xccordionController) {
            scope.showMe = false;
            xccordionController.addExpander(scope);
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;
                xccordionController.gotOpened(scope);
            }
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'No,click me!',
        text : 'I am text that should be seen before seeing other texts'
    }];
});

accordion指令，它会做一些元素定位工作。我们把控制器的构造函数以及进行元素定位操作的方法添加到accordion指令中。accordion指令中定义了一个addExpander()函数，扩展条可以调用它来注册自身；还创建了一个可被扩展条调用的gotOpened()函数，通过它，accordion的控制器就知道需要把其他所有处于打开状态的扩展条都关闭。

在expander指令自身中，我们扩展它的时候要求accordion的控制器来自它的父元素，然后在合适的时候调用addExpander()和gotOpened()函数。

注意，accordion指令中的控制器创建了一个API接口，有了它，所有扩展条控件之间就可以进行通信了。

编写模板来使用以上指令如下：

DirectiveAccordionExpander.html

<html ng-app="expanderModule">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="lib/angular/angular.js"></script>
        <link rel="stylesheet" type="text/css" href="css/Accordion.css"/>
    </head>
    <body ng-controller='SomeController' >
        <accordion>
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>
    <script src="directive/Accordion.js"></script>
</html>

Accordion.css

.expander {
    border: 1px solid black;
    width: 250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding: .1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding: .1em .3em;
}

.closed {
	display: none;
}

运行效果：