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

    例子:

    复制代码
    <!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('d1',function() {
                return{
                    priority:0,
                    transclude:true,
                    //terminal:true,
                    template:'<a href="http://angularjs.org/" ng-transclude></span>'
                };
            });
            app.directive('d2',function() {
                return{
                    priority:1,
                    link:function(scope){
                        console.log('d2链接函数被调用。');
                        scope.greeting = 'AngularJs';
                    }
                };
            });
        </script>
    </head>
    <body ng-app="app">
    <div d1 d2>Hello {{greeting}}!</div>
    </body>
    </html>
    复制代码

     

    以上代码,暂时注释掉terminal:true

    输出为:

    Hello AngularJs!

    把//去掉,再看,一片空白,审查元素看看:

    d2的优先级已经设置得比d1高,从控制台也可以看出d2的链接函数被调用了。

     

    但是

    Hello {{greeting}}!

    这个东西完全被丢弃了。官方文档的说法是:设置terminal为true的指令中,其模板里内嵌的指令和表达式都会被抛弃。上面例子d1指令被设置terminal为true之后,其模板里的ng-transclude指令也就无效了,结果可想而知。

    再验证一下:

    复制代码
    <!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('d1',function() {
                return{
                    //terminal:true,
                    template:'<a ng-href="http://angularjs.org/">Hello AngularJs!</a>'
                };
            });
    
        </script>
    </head>
    <body ng-app="app">
    <div d1></div>
    </body>
    </html>
    复制代码

    输出:

    Hello AngularJs!

    审查元素看看:

    AngularJs自动增加了href,所以超链接没问题。

    去掉注释,输出:

    Hello AngularJs!

    超链接没了,只剩下文本!

    审查元素看看:

    href没有出现,可见ng-href没有执行,可以尝试更高优先级的指令,放在模板里,也不会被执行。

     

    使用terminal选项的典型例子是AngularJs内置指令ngIf,在这里可以查看源码:https://github.com/angular/angular.js/blob/v1.3.16/src/ng/directive/ngIf.js#L3

     

  • 相关阅读:
    Octet string 解析
    c#之process类相关整理
    C# Process.Start()方法详解(转)
    c语言字符串比较函数strcmp
    C# 启动EXE文件及带启动参数EXE
    C语言中两个相等的char值比较 结果为false
    C语言strcmp()函数:比较字符串(区分大小写)
    char数组与char指针
    (转)在.net中序列化读写xml方法的总结
    PHP实现站点pv,uv统计(三)
  • 原文地址:https://www.cnblogs.com/minghui007/p/7161063.html
Copyright © 2011-2022 走看看