angularJS中如何写自定义指令

指令定义

对于指令,可以把它简单的理解成在特定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中如何写自定义指令的更多相关文章

在angular7中创建组件/自定义指令/管道
在angular7中创建组件/自定义指令/管道组件使用命令创建组件创建组件的命令:ng generate component 组件名生成的组件组成: 组件名.html .组件名.ts.组件名. ...
AngularJS：如何使用自定义指令来取代ng-repeat
引言本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的 ...
AngularJs中的directives（指令part1）
一.指令的职责指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 ...
AngularJs学习笔记3——自定义指令
指令概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...
AngularJS学习笔记(四) 自定义指令
指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...
angularJS中如何写控制器
angularJS中的控制器是一个函数,用来向视图作用域中添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为当我们在页面上创建一个新的控制器时,angularJS会生成并传递一个新 ...
angularjs中常用的ng指令介绍【转载】
原文:http://www.cnblogs.com/lvdabao/p/3379659.html 一.模板中可使用的东西及表达式模板中可以使用的东西包括以下四种: 指令(directive).ng提 ...
angularJS中如何写服务
服务的用途服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性服务提供了把特定功能相关联的方法集中在一起的接口如何创建服务 angularJS ...
AngularJS中的指令
欢迎大家讨论与指导 : ) 前言当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. ...

随机推荐

AQL Subset Compiler：手把手教你如何写一个完整的编译器
项目地址:https://github.com/laiy/Awesome-Complier. 转载请注明出处. 前言这是学校里编译原理课程的大作业,此Project十分适合编译原理的学习,让基本不听 ...
sql宽字节注入，绕过单引号
参加下面: http://leapar.lofter.com/post/122a03_3028a9 http://huaidan.org/archives/2268.html https://ilia ...
Swift基本语法学习笔记
Swift与OC的不同点导入框架的方式 OC使用#import \<UIKit/UIKit.h> Swift使用import UIKit 定义标识符的方式 Swift中定义标识符,必须指 ...
ImageView类简介
4.8 图片控件本节将要介绍的是图片控件ImageView,首先对ImageView类进行简单介绍,然后通过一个案例来说明ImageView的用法. 4.8.1 ImageView类简介 Ima ...
使用WinINet和WinHTTP实现Http訪问
使用WinINet和WinHTTP实现Http訪问飘飘白云 l_zhaohui@163.com 2007-11-30 Http訪问有两种方式,GET和POST,就编程来说GET方式相对简单点,它不用 ...
cocos2d-x创建精灵动画
创建动画一般过程: 1.创建精灵框架缓存,并向其中添加相应的动画文件(plist),最后,通过动画集缓存生产动画 CCSpriteFrameCache *cache = CCSpriteFrameCa ...
nandflash中oob、ecc分析
1.为何需要分析? 最近一直接触这类驱动,如果对它的原理不懂的话,驱动调试会很麻烦!!!!!! 2.ecc? nand的纠错能力,目前有1位.4位和8位,也就是说在512字节中如果是4位的ecc那就可 ...
【Linux学习】Linux的文件权限（一）
Linux操作系统是一个非常优秀的操作系统,同一时候也是一个多用户.多任务的操作系统.那么这就意味着会有非常多的人同一时候使用同一个操作系统的情况. 这时.对于一个用户来说,保护好自己的隐私权就成了一 ...
java继承分析
把java学完之后有開始了一遍突然发现对于继承还是不太理解所以就做了一个測试来分析一下 <span style="font-size:18px;">class A{ p ...
android 51 有序广播
无序广播:一条广播发送出去,多个接收者接收没有顺序.有序广播:广播接收者可以设置优先级,优先级高的先收到广播.有序广播可以设置优先级. mainActivity.java package com.sx ...