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. Java日志——2016年5月30日

    1. 局部变量必须初始化,可以定义的同时初始化,也可以定义完成之后进行初始化. 2. Java7新特性:数字之间可以使用"_"连接,eg:23_44_5 = 23445,0B110 ...

  2. JS函数

    1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏 ...

  3. iOS常见算法笔试问题

    1. 给出一个由小写字母组成的字符串,把所有连续出现的 2 个 a 替换成 bb ( 2 个 b ),但是对于超过两个连续的 a,那么这些字符都不作替换.例如: bad -> bad (一个a, ...

  4. java 在linux环境下写入 syslog 问题研究

    1.Syslog 在Unix类操作系统上,syslog广泛应用于系统日志.syslog日志消息既可以记录在本地文件中,也可以通过网络发送到接收syslog的服务器.接收syslog的服务器可以对多个设 ...

  5. mysql快速导入大量数据问题

    今天需要把将近存有一千万条记录的*.sql导入到mysql中.使用navicate导入,在导入100万条之后速度就明显变慢了, 导入五百万条数据的时候用了14个小时,且后面的数据导入的越来越慢. 后来 ...

  6. poj1068

    Parencodings Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18785   Accepted: 11320 De ...

  7. SystemC简介

    SystemC是一种基于C++语言的用于系统设计的计算机语言,是用C++编写的一组库和宏.它是为了提高电子系统设计效率而逐渐发展起来的产物.IEEE于2005年12月批准了IEEE1666-2005标 ...

  8. LIKE模糊查询的通配符

    LIKE模糊查询的通配符 通配符 说明 示例 % 包含零个或多个字符的任意字符串. WHERE title LIKE '%computer%' 将查找在书名中任意位置包含单词 "comput ...

  9. completed solution matches microsoft sequential workflow tutorial

    microsoft sequential workflow tutorial website:http://msdn.microsoft.com/en-us/library/ms734794(v=vs ...

  10. U-Mail邮件网关提醒：谨防像素图片钓鱼窃密

    垃圾邮件和病毒的日益猖獗,既因为邮件在商务往来中扮演着越来越重要的角色,也因为犯罪成本低收益高.近年来,不少为非作歹者致力于通过邮件诈骗牟利,想出了种种奇思妙计,导致相关服务商在安全领域逐年加大研发投 ...