multiElement不太常用，从下面这个例子可以大致看出它的作用：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

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

        app.directive('myDirective',function () {

            return{

                multiElement:true,

                link:function(scope,element,attrs){

                    console.log(element);

                }

            };

        });

    </script>

</head>

<body ng-app="app">

<span my-directive-start></span>

<span my-directive-end></span>

</body>

</html>

在Chrome浏览器中审查元素，看看控制台输出：

由此可知传给连接函数的element不是单个元素，而是3个，包括两个span和一个回车符。

实际上，我们把HTML代码改成：

<my-directive><span></span>

<span></span></my-directive>

控制台输出：

这时候我们仍然可以在childNodes中找到它们。

所以把multiElement设为true的目的，仅仅是引入my-directive-start、my-directive-end这两个标记，在某些时候有利于我们书写。

现在看看AngularJs内置指令ngRepeat（可以使用ng-repeat-start和ng-repeat-end）类似的做法：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

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

        app.run(function ($rootScope) {

            $rootScope.list = [{name: '张三', age: 26, gender: '男'}, {name: '李四', age: 24, gender: '男'}];

        });

    </script>

</head>

<body ng-app="app">

<table border="1">

    <tbody>

    <tr ng-repeat-start="l in list">

        <td>{{l.name}}</td>

        <td></td>

    </tr>

    <tr ng-repeat-end>

        <td>{{l.age}}</td>

        <td>{{l.gender}}</td>

    </tr>

    </tbody>

</table>

</body>

</html>

输出：

张三  
26 男
李四  
24 男

如果没有ng-repeat-start和ng-repeat-end，用ng-repeat输出上面的东西，很吃力。

我们在ng-repeat-start和ng-repeat-end之间可以任意胡来，例子：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <script src="../lib/angular-1.3.16/angular.min.js"></script>

    <script src=""></script>

    <title></title>

    <script language="JavaScript">

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

        app.run(function ($rootScope) {

            $rootScope.list = [{name: '张三', age: 26, gender: '男'}, {name: '李四', age: 24, gender: '男'}];

        });

    </script>

</head>

<body ng-app="app">

<table border="1">

    <tbody>

    <tr ng-repeat-start="l in list">

        <td>{{l.name}}</td>

    </tr>

    <tr>

        <td>{{l.age}}</td>

    </tr>

    <tr ng-repeat-end>

        <td>{{l.gender}}</td>

    </tr>

    </tbody>

</table>

</body>

</html>

输出：

张三
26
男
李四
24
男

AngularJs自定义指令详解（7） - multiElement的更多相关文章

  1. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  2. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  3. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  4. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  5. AngularJs自定义指令详解（9） - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  6. AngularJs自定义指令详解（8） - priority

    priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

  7. AngularJs自定义指令详解（3） - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...

  8. AngularJs自定义指令详解（10） - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  9. AngularJs自定义指令详解（4） - transclude

    transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...

随机推荐

  1. How secure FB Messenger is?

    It's reported that FB Messenge is the most secure App for instant messaging service. Let's see if FB ...

  2. java程序员需要掌握些什么知识

    java程序员需要掌握些什么知识 合格的程序员应具有实际开发能力的Java和J2EE.如今的IT企业需求量大,但人才紧缺的.企业需要大量掌握Java/JEE/Oracle/WebLogic/Websp ...

  3. cache-contro页面缓存处理设置

    <meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页 ...

  4. pdf 切割成圖片的方法

    /// <summary>         /// 将PDF文档转换为图片的方法         /// </summary>         /// <param na ...

  5. TJI读书笔记15-持有对象

    TJI读书笔记15-持有对象 总览 类型安全和泛型 Collection接口 添加元素 List 迭代器 LinkedList 栈 Set Map Queue Collection和Iterator ...

  6. (转)深入理解javascript连续赋值表达式

    引入 今天逛园子的时候看到一道javascript面试题,是关于连续赋值的,正好最近读jQuery源码经常看到这种连续赋值的表达式,所以很感兴趣. 废话不多说,来看题: var a = {n: 1} ...

  7. c# 的MD5加密算法

    发现用C#封装好的内部类实现MD5加密和其它语言的MD5加密结果有时会不一样,暂时发现没有特殊字符时的结果是一样的,一旦有特殊字符(09404719290010210‹»×úÛ±8*«À‡7œ–201 ...

  8. Arcgis Server发布服务

    提到Arcgis Server 服务的发布,做起来貌似很简单,就算电脑再卡,只要鼠标还能点,一个小时肯定能搞定,但是当你遇到问题的时候,就头大了,也许搞上个一两天都摸不着头脑,最后你采取的措施可能是一 ...

  9. Python之路-Day2

    二进制 1bit = 一个二进制位 8bit = 1byte 循环 for while 数据类型 数字.字符串.列表.元祖.字典.集合 字符编码 文件处理 for循环: for i in range( ...

  10. Math Start!

    (1)Add Digits 解题思路: 基于同余的数学属性. 数字的根(即题目所要求返回的最终结果)与该数字除以9时的余数相同(并且该余数将始终为单个数字). take 438 as an examp ...