zoukankan      html  css  js  c++  java
  • AngularJs自定义指令详解(7)

    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
  • 相关阅读:
    卡特兰数
    java学习
    最大化窗口
    C++复制文件的代码
    C++复制文件(使用WindowsAPI)
    C++下获取XMLHTTPRequest指针
    操作哈希表
    《Windows Communication Foundation之旅》系列之三(转载)
    让.Net2.0的Membership使用已存在的Sql Server2000/2005数据库
    用Visual C#做WinForm组件
  • 原文地址:https://www.cnblogs.com/sagacite/p/4622008.html
Copyright © 2011-2022 走看看