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
  • 相关阅读:
    Spring事务的一些基本知识(一)
    Redis管道
    Spring事务的一些基本知识(四)大事务的危害与优化
    登录页面测试点
    朋友圈点赞用例的设计点
    面向对象
    函数的重载
    构造代码块和静态代码块,构造函数的执行
    单例设计模式
    三分查找(2020icp南京F)
  • 原文地址:https://www.cnblogs.com/sagacite/p/4622008.html
Copyright © 2011-2022 走看看