首页 > 其他 > 详细

directive <一>全面论述

时间:2017-08-24 12:02:01      阅读:302      评论:0      收藏:0      [点我收藏+]
指令是Angular的一个特殊标志,也是有别于其他框架的一个重要特征,Angular之所以功能强大,在很大程度上得益于它拥有大量内置的指令,也能通过语法自定义指令。从字面意义来说,“指令”是一种执行的信号,一旦发布了这个指令,就要执行某项动作。Angular中的指令是一个在特定DOM元素上执行的函数。

一、定义指令

在Angular中,定义一个新指令的方法很简单,只需要调用directive方法即可,该方法可以接收两个参数,具体的调用格式如下:
var app = angular.module("myapp", []);
app.directive(name, fn) ;
示例代码如下:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="angular-1.3.0/angular.min.js"></script>
    </head>
    <body>
        <hello></hello>
        <div hello></div>
        <div class="hello"></div>
        <!-- directive:hello -->
        <div></div>

       <script type="text/javascript" >
         var myModule = angular.module("MyModule", []);
         myModule.directive("hello", function() {
         return {
          restrict: AEMC,
          template: <div>Hi everyone!</div>,
          replace: true
    }
});
</script>
</body>
</html>

二、指令对象的基础属性

       replace属性值是布尔类型的,当该属性值为true时,表示将模板中的内容替换为指令为标记;当该属性值为false时,表示不替换指令标记,而是将内容插入到指令标记中,此时,无论指令标记中是否存在内容,都将被清空,该属性的默认值为false。
       templateUrl的属性值是一个URL地址,该地址将指向一个模板页面,该属性常用于处理复杂模板内容,与template属性不能同时使用,只能取其中之一。
示例代码如下:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <title>指令对象的基础属性</title>
        <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script>
        <style type="text/css">
         .frame{
            padding:2px 8px;
            margin: 0px;
            font-size: 12px;
            width:320px;
            background-color: #eee;
         }
        </style>
    </head>

    <body>
     <div class="frame">
        <ts-tplfile></ts-tplfile>
        <ts-tplscipt></ts-tplscipt>
        <ts-tplcache></ts-tplcache>
     </div>
     <script type="text/ng-template" id="tpl">
         <h3>模板内容来自于script元素</h3>
     </script>

     <script type="text/javascript">
     var app=angular.module(MyModule,[])
     .run(function($templateCache){
         $templateCache.put(cache,
             <h3>模板内容来自缓存</h3>)
     })
     .directive(tsTplfile,function(){
         return{
             restrict:EAC,
             templateUrl:tpl.html,
         };
     })
     .directive(tsTplscipt,function(){
         return{
             restrict:EAC,
             templateUrl:tpl,
             replace:true
         };
     })
      .directive(tsTplcache,function(){
         return{
             restrict:EAC,
             templateUrl:cache,
         };
     });

     </script>
    </body>    
</html>

三、Angular指令对象的重要属性

1.指令对象中的transclude属性

在定义指令对象时,可以不添加transclude属性,如果添加该属性,那么它的属性值是布尔类型的,默认值为false,表示不开启属性,如果设置为true时,则开启了该属性;当开启了属性后,就可以在模板中通过ng-transclude方式替换指令元素中的地内容。
代码示例如下:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="angular-1.3.0/angular.min.js"></script>
    </head>
    <body>
        <hello>
            <div>这里是指令内部的内容。</div>
        </hello>

        <script type="text/javascript">
        var myModule = angular.module("MyModule", []);
        myModule.directive("hello", function() {
        return {
        restrict:"AE",
        transclude:true,
        template:"<div>Hello everyone!<div ng-transclude></div></div>"
         } 
      }); 
    </script>
    </body>    
</html>

2.指令对象中的link属性

“link”属性的值是一个函数,在该函数中可以操控DOM元素对象,包括绑定元素的各类事件,定义事件触发时执行的内容,函数定义的代码如下:
link:function(scope,element,attrs){
...
}
其中,scope参数表示指令所在的作用域,它的功能和页面中控制器注入的作用域是相同的,element参数表示指令中的元素,attrs表示指令元素的属性集合。
示例代码如下:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <title>指令对象的link属性</title>
        <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script>
        <style type="text/css">
         .frame{
            padding:2px 8px;
            margin: 0px;
            font-size: 12px;
            width:320px;
            background-color: #eee;
         }
         .tip{
            font-size: 9px;
            color:#666;
            margin:3px 5px;
         }
        </style>
        <script type="text/ng-template" id="tpl">
         <button>单击按钮</button>
        </script>

    </head>

    <body>
     <div class="frame">
        <ts-tplscipt></ts-tplscipt>
        <div class="tip">{{content}}</div>
     </div>

     <script type="text/javascript">
     var app=angular.module(MyModule,[])
     .directive(tsTplscipt,function(){
         return{
             restrict:EAC,
             templateUrl:tpl,
             replace:true,
            link:function(scope,element,attrs){
                element.bind(click,function(){
                    scope.$apply(function(){
                        scope.content=这是点击后的内容;
                    })
                    attrs.$$element[0].disable=true;
                });
            }
         };
     });

     </script>
    </body>    
</html>

3.指令对象的scope属性

(1)scope属性是布尔值

scope属性自定义指令时,默认值就是布尔类型的,初始值为false。在这种情况下,指令中的作用域就是指令元素所在的作用域,两者是相同的。如果scope属性值为true,则表示子作用域(指令中的作用域成为子作用域,把指令元素所在的作用域称为父作用域)是独立创建的,当它的内容发生变化时,并不会修改父作用域中的内容。示例代码如下:

<!doctype html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8">
        <title>scope属性</title>
        <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script>
        <style type="text/css">
         .frame{
            padding:2px 8px;
            margin: 0px;
            font-size: 12px;
            width:320px;
            background-color: #eee;
         }
         .tip{
            font-size: 9px;
            color:#666;
            margin: 3px 5px;
         }
        </style>
        <script type="text/ng-template" id="tpl">
          <div class="tip">{{message}}</div>
          <button ng-transclude></button>
        </script>
    </head>

    <body>
     <div class="frame">
      <input ng-model="message" placeholder="请输入内容"/>
      <ts-message>固定</ts-message>
     </div>

     <script type="text/javascript">
     var app=angular.module(MyModule,[])
     .directive(tsMessage,function(){
         return{
             restrict:EAC,
             templateUrl:tpl,
             transclude:true,
             scope:true,
             link:function(scope,element,attrs){
                 element.bind(click,function(){
                     scope.$apply(function(){
                         scope.message=这是单击按钮后的值;
                     })
                 })
             }
         };
     });
     </script>
    </body>

(2)scope属性是对象

scope属性值还可以设置成一个JSON对象,如果是对象,那么,父作用域与自作用域是完全独立的,不存在任何联系。当指令中的scope属性值是JSON对象时,如果子作用域需要添加属性,必须先添加指令中的link函数,然后,通过函数中的scope对象进行添加;如果在子作用域中,要绑定或调用父作用域中的属性和方法,则需要在scope属性对应的的JSON对象值中添加绑定策略。



作者:开心糖果的夏天
链接:http://www.jianshu.com/p/6d30a0fbe74e



directive <一>全面论述

原文:http://www.cnblogs.com/dlgood/p/7422118.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!