directive <一>全面论述

指令是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

时间： 2025-01-08 18:46:06

directive <一>全面论述的相关文章

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

Angular学习心得之directive——require选项的细节

谈require选项之前,应该先说说controller选项,controller选项允许指令对其他指令提供一个类似接口的功能,只要别的指令(甚至是自己)有需要,就可以获取该controller,将其作为一个对象,并取得其中的所有内容.而require就是连接两个指令的锁链,它可以选择性地获取指令中已经定义好的controller,并作为link函数的第四个参数传递进去,link函数的四个参数分别为scope,element,attr和someCtrl,最后一个就是通过require获取的con

Angular之指令Directive系列

项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q

[Angular Directive] Create a Template Storage Service in Angular 2

You need to define a <template> to be able to use it elsewhere in your app as a TemplateRef. You can store these TemplateRefs in a Service and then access them from any @Directive or @Component in your app. We want to create a service and a componen

directive(指令里的)的compile,pre-link,post-link,link,transclude

The nitty-gritty of compile and link functions inside AngularJS directives  The nitty-gritty of compile and link functions inside AngularJS directives part 2: transclusion [译]ng指令中的compile与link函数解析 AngularJS directives are amazing. They allow you to

学习AngularJs:Directive指令用法（完整版）

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable

In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in t

Scope Directive

---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/scope What are Scopes? Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hiera