指令定义

  • 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能
  • 例如,ng-click可以让一个元素能够监听click事件,并在接收到事件的时候执行angularJS表达式
  • 正是指令使得angularJS这个框架变得强大,并且正如所见,我们可以自己创造新的指令

指令声明方法

angular.module('freefedApp',[]).directive(name,function(){

      return {

            restrict: String,

            priority: Number,

            terminal: Boolean,

            template: String or Template Function:function(tElement, tAttrs) (...},

            templateUrl: String,

            replace: Boolean or String,

            scope: Boolean or Object,

            transclude: Boolean,

            controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },

            controllerAs: String,

            require: String,

            link: function(scope, iElement, iAttrs) { ... },

       };

});

指令作用域

DOM中每个指令调用时都可能会:

  • 直接调用相同的作用域对象
  • 从当前作用域对象继承一个新的作用域对象
  • 创建一个同当前作用域相隔离的作用域对象

作用域scope设置(参数是可选的,默认值是false):

  • true 会从父作用域继承并创建一个新的作用域对象
  • false 直接调用相同作用域对象
  • {} 创建具有隔离作用域,具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域

作用域绑定策略

对于指令隔离作用域angularJS提供了几种方法能够将指令内部的隔离作用域,同指令外部的作用域进行数据绑定

  • @(or @attr) 使用@符号将指令本地作用域同DOM属性的值进行绑定,指令内部作用域可以使用外部作用域的变量,纯粹的值绑定
  • =(or =attr) 通过=可以将本地作用域上的属性同父级作用域上的属性进行双向的数据绑定,就像普通的数据绑定一样,本地属性会反映出父数据模型中所发生的改变
  • &(or &attr) 通过&符号可以对父级作用域进行绑定,以便在其中运行函数。意味着对这个值进行设置时会生成一个指向父级作用域的包装函数,要使调用带有一个参数的父方法,我们需要传递一个对象,这个对象的键是参数的名称,值是要传递给参数的内容
demo.html

<!doctype html>

<html ng-app="freefedApp">

   <head>

        <title>angular应用demo</title>

        <script src="angular.js"></script>

        <script src="app.js"></script>

  </head>

  <body>

  <div ng-controller="freefedCtrl">

       发送邮件地址 : <input type="text" ng-model="from" />

       接收邮件地址 : <input type="text" ng-model="to" />

        <div email-directive from-email="{{from}}" to-email="to" on-send="sendMail(email)">

        </div>

   </div>

  </body>

</html>
app.js

/*声明module*/

var module = angular.module('freefedApp',[]);

/*声明控制器*/

module.controller('freefedCtrl',['$scope',function($scope){

      $scope.from = 'zhangzhen@hoge.cn';

      $scope.sendMail = function(email){

          alert('我将发送邮件到' + email);

      };

}]);

/*声明指令*/

module.directive('emailDirective',function(){

      return {

           scope : {

               fromEmail : '@'       //值绑定

               toEmail : '='         //和父级作用域属性进行双向绑定

               onSend : '&'          //与父级作用域进行绑定

           },

           link : function( scope,el,attr ){

                scope.onSend( { email : scope. toEmail} );      //调用与onSend绑定的父级作用域的sendMail函数，并传递参数email的值给它

           }

      };

});

指令参数详解

  • restrict: String

    restrict是一个可选的参数。它告诉angularJS这个指令在DOM中可以何种形式被声明。默
    
认angularJS认为restrict的值是A,即以属性的形式来进行声明;可选值如下:
    
E(元素)
    
A(属性,默认值)
     
    C(类名)
     
    M(注释)
  • priority: Number, 
    优先级参数可以被设置为一个数值。大多数指令会忽略这个参数,使用默认值0,但也有些 场景设置高优先级是非常重要甚至是必须的。
    
例如,ngRepeat将这个参数设置为1000,这样就可 10 以保证在同一元素上,它总是在其他指令之前被调用

  • terminal: Boolean,

    这个参数用来告诉angularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令 优先级相同的指令还是会被执行。
    
如果元素上某个指令设置了terminal参数并具有较高的优先级,就不要再用其他低优先级的 指令对其进行修饰了,因为不会被调用。
    
但是具有相同优先级的指令还是会被继续调用。使用了terminal参数的例子是ngView和ngIf。ngIf的优先级略高于ngView,如果ngIf的表 达式值为true,
    
ngView就可以被正常执行,但如果ngIf表达式的值为false,由于ngView的优先 级较低就不会被执行

  • template: String or Template Function:function(tElement, tAttrs) (...},

    template参数是可选的,必须被设置为以下两种形式之一:
    
一段HTML文本;
    
一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个代表模板的字符
    
串。tElement和tAttrs中的t代表template,是相对于instance的。在讨论链接和编译 设置时会详细介绍,模板元素或属性与实例元素或属性之间的区别。
    
angularJS会同处理HTML一样处理模板字符串。模板中可以通过大括号标记来访问作用域, 例如{{ expression }}。
    
如果模板字符串中含有多个DOM元素,或者只由一个单独的文本节点构成,那它必须被包 含在一个父元素内。换句话说,必须存在一个根DOM元素:
    
     template: '\
    
         <div> <-- single root element -->\
    
             <a href="http://google.com">Click me</a>\
    
             <h1>When using two elements, wrap them in a parent element</h1>\
    
         </div>\
    
另外,注意每一行末尾的反斜线,这样angularJS才能正确解析多行字符串。在实际生产中, 更好的选择是使用templateUrl参数引用外部模板

  • templateUrl: String,

    templateUrl是可选的参数,可以是以下类型:
    
一个代表外部HTML文件路径的字符串;
    
一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件路径的字符串,
    
默认情况下,调用指令时会在后台通过Ajax来请求HTML模板文件
    
模板加载是异步的,意味着编译和链接要暂停,等待模板加载完成。
    
通过Ajax异步加载大量的模板将严重拖慢一个客户端应用的速度。为了避免延迟,可以在部 署应用之前对HTML模板进行缓存。
    
在大多数场景下缓存都是一个非常好的选择,
    
因为angularJS 通过减少请求数量提升了性能。模板加载后,angularJS会将它默认缓存到$templateCache服务中。
    
在实际生产中,可以提前将模板缓存到一个定义模板的JavaScript文件中,这样就不需要通过XHR来加载模板了

  • replace: Boolean or String,

    replace是一个可选参数,如果设置了这个参数,值必须为true,因为默认值为false。
    
默认值意味着模板会被当作子元素插入到调用此指令的元素内部:
    
     <div some-directive></div>
    
     .directive('someDirective', function() {
    
             return {
    
                  template: '<div>some stuff here<div>'
    
             };
    
      });
    
调用指令之后的结果如下(这是默认replace为false时的情况):
    
     <div some-directive>
    
         <div>some stuff here<div>
    
     </div> 如果replace被设置为了true:
    
     .directive('someDirective', function() {
    
             return {
    
                  replace: true // 修饰过
    
                  template: '<div>some stuff here<div>'
    
             };
    
     });
    
指令调用后的结果将是:
    
     <div>some stuff here<div>

  • scope: Boolean or Object,

    看上面指令作用域

  • transclude: Boolean,

  • controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },

    controller参数可以是一个字符串或一个函数。当设置为字符串时,会以字符串的值为名字,
    
来查找注册在应用中的控制器的构造函数</pre>
    
* controllerAs: String,<pre>controllerAs参数用来设置控制器的别名,可以以此为名来发布控制器,我们可以在路由和指令中创建匿名控制器的强大 能力。
    
这种能力可以将动态的对象创建成为控制器,并且这个对象是隔离的、易于测试的```
  • require: String,

  • link: function(scope, iElement, iAttrs) { ... },

    用link函数创建可以操作DOM的指令

angularJS中如何写自定义指令的更多相关文章

  1. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  2. AngularJS：如何使用自定义指令来取代ng-repeat

    引言 本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的 ...

  3. AngularJs中的directives（指令part1）

    一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...

  4. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  5. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  6. angularJS中如何写控制器

    angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为 当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...

  7. angularjs中常用的ng指令介绍【转载】

    原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式 模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...

  8. angularJS中如何写服务

    服务的用途 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性 服务提供了把特定功能相关联的方法集中在一起的接口 如何创建服务 angularJS ...

  9. AngularJS中的指令

    欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

随机推荐

  1. 适配器模式 java

    结构模式:将类和对象结合在一起构成更大的结构,就像是搭积木. 1.适配器模式 源接口---适配器--目标接口 2.使用场景: 现在你有一个很古老的类,里面的一些方法很有用,你如何使用这些方法? 当然你 ...

  2. mac下的改装人生——关于mc700安装双硬盘以后的win重装问题

    宝贝到家~玩了几天,感觉神清气爽~今天正式开始准备工作了哈. 今天早上开了mac的win7系统发现了几个小问题.好吧我承认这个真的是小问题,就是我没有办法能调整屏幕的亮度了.重装了bootcamp依然 ...

  3. Bzoj 2763: [JLOI2011]飞行路线 拆点,分层图,最短路,SPFA

    2763: [JLOI2011]飞行路线 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1694  Solved: 635[Submit][Statu ...

  4. OpenStack G版以后的Availability Zone与Aggregate Hosts

    关于Availability Zone与Aggregate Hosts的概念解析,可以参考这篇文章:http://blog.chinaunix.net/uid-20940095-id-3875022. ...

  5. Android中的资源文件

    最近复习Android资源文件的内容,留下点记录以备后用. Android中的资源主要是指存放在应用程序或者Framework相应包下/res中的内容.它们可以被本地化,如果必要的话会被编译成二进制文 ...

  6. 天津Uber优步司机奖励政策（1月18日~1月24日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  7. 传统IO与NIO区别二

    nio是new io的简称,从jdk1.4就被引入了.现在的jdk已经到了1.6了,可以说不是什么新东西了.但其中的一些思想值得我来研究.这两天,我研究了下其中的套接字部分,有一些心得,在此分享.  ...

  8. Unit Test单元测试时如何模拟HttpContext

    参考文章:http://blog.csdn.net/bclz_vs/article/details/6902638 http://www.cnblogs.com/PurpleTide/archive/ ...

  9. Android 官方命令深入分析

    原文:www.libgdx.cn Android SDK包括了多种工具来帮助你创建基于Android平台的移动应用.这些工具一般分成两类:SDK 工具和 platform 工具. SDK 工具是独立的 ...

  10. JAVA 内存泄露的理解

    1 什么是内存泄露? 内存泄露是指没用的对象持续占有内存空间,造成内存空间浪费.所以说JAVA是有内存泄露的. 2 内存泄露的原因是什么? 较长生命周期对象持有短生命周期对象的引用,导致短生命周期对象 ...