在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令。

  本篇文章的参考来自  AngularJS权威指南 ,

  文章中主要介绍指令定义的选项配置

  废话不多说,下面就直接上代码

//angular指令的定义,myDirective ,使用驼峰命名法
angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
// 指令操作代码放在这里
}); //angular自定义指令 的使用,使用 “-” 来代替驼峰命名法
<div my-directive></div>
注意:为了避免与未来的HTML标准冲突,给自定义的指令加入前缀来代表自定义的
命名空间。AngularJS本身已经使用了 ng- 前缀,所以可以选择除此以外的名字。
在例子中我们使用 my- 前缀(比如 my-derictive ) 。 指令的生命周期开始于 $compile 方法并
结束于 link 方法 //自定义指令的全部可设置的属性大致如下
指令的选项如下所示,每个键的值说明了可以将这个属性设置为何种类型或者什么样的
函数:
angular.module('myApp', [])
.directive('myDirective', function() { //指令名称myDirective
return { //返回一个对象
restrict: String, //可选字符串参数,可以设置这个指令在DOM中可以何种形式被声明,
//默认为A(attr(当做标签属性来使用))<div my-directive></div>
// 设置为“E”(ele,(直接当做标签来使用)) <my-directive></my-directive>
//C(类名)
//<div class="my-directive:expression;"></div>
//M(注释)
//<--directive:my-directive expression-->
//这些选项可以单独使用,也可以混合在一起使用:
//angular.module('myDirective', function(){
// return {
// restrict: 'EA' // 输入元素或属性
// };
//}) priority: Number, //优先级,可忽略,默认为0, ngRepeat的优先级为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用。
terminal: Boolean,//(布尔型),true或false,如果为false,则这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。优先级相同的指令还是会被执行。 ngIf 的优先级略高于 ngView ,
template: String or Template Function: //(字符串或函数)指令中的一个重要的一个属性,必须被设置其中一种
//1, 一段HTML文本;
//2,可以接收两个参数的函数,参数为 tElement 和 tAttrs
//在html模板中必须只有一个根html标签,且如果有换行则需要使用“\”
//例如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>\
//function(tElement, tAttrs) (...},
//更好的选择是使用 templateUrl 参数引用外部模板,参考下面的参数
templateUrl: String, //(字符串或函数)1,外部路径的字符串,2,接受两个参数的函数,参数为 tElement 和 tAttrs ,并返回一个外部HTML文件路径的字符串
//模板加载后,AngularJS会将它默认缓存到 $templateCache 服务中。(可以提前加载模块到缓存中,提高加载速度)
replace: Boolean or String, //(布尔型)默认为false(模板内容会加载到标签内部),true(模板内容会替换当前标签)
scope: Boolean or Object, //(布尔型或对象),默认为false, 设置为true 时,会从父作用域继承并创建一个新的作用域对象。
// ng-controller 的作用,就是从父级作用域继承并创建一个新的子作用域。
//如果要创建一个能够从外部原型继承作用域的指令,将 scope 属性设置为 true
//设置为一个对象,则能设置 隔离作用域, scope 属性设置为一个空对象 {} 。如果这样做了,指令的模板就无法访问外部作用域了:
//例如.directive('myDirective', function() {
// return {
// restrict: 'A',
// scope: {},
// priority: 100,
// template: '<div>Inside myDirective {{ myProperty }}</div>'
// };
// }); //在scope对象中,还可以使用“@” “=” “&”,来设置模板中数据的作用域和绑定规则
//"@" 本地作用域属性:使用当前指令中的数据和DOM属性的值进行绑定
//“=” 双向绑定:本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。
//“&” 父级作用域绑定:通过 & 符号可以对父级作用域进行绑定
//例如
//scope: {
// ngModel: '=', // 将ngModel同指定对象绑定
// onSend: '&', // 将引用传递给这个方法
// fromName: '@' // 储存与fromName相关联的字符串
//} transclude: Boolean, //默认为false.只有当你希望创建一个可以包含任意内容的指令时, 才使用 transclude: true 。
//如果指令使用了 transclude 参数,那么在控制器(下面马上会介绍)中就无法正常监听数
//据模型的变化了。
controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }, //(字符串或函数)注册在应用中的控制器的构造函数
//使用函数创建内联控制器,例如
//angular.module('myApp',[])
// .directive('myDirective', function() {
// restrict: 'A',
// controller:
/ function($scope, $element, $attrs, $transclude) {
// // 控制器逻辑放在这里
// }
//}) controllerAs: String, //可以在指令中创建匿名控制器,例如
//.directive('myDirective', function() {
// return {
// restrict: 'A',
// template: '<h4>{{ myController.msg }}</h4>',
// controllerAs: 'myController',
// controller: function() {
// this.msg = "Hello World"
// }
// };
//}); require: String, //(字符串或数组)字符串代表另外一个指令的名字,如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或
//具有指定名字的指令)就抛出一个错误。
//例如
//如果不使用 ^ 前缀,指令只会在自身的元素上查找控制器。
//require: 'ngModel'
// 使用 ? 如果在当前指令中没有找到所需要的控制器,会将 null 作为传给 link 函数的第四个参数
//require: '?ngModel'
//使用 ^ 如果添加了 ^ 前缀,指令会在上游的指令链中查找 require 参数所指定的控制器。
//require: '^ngModel'
// 使用 ^? 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。
//require: '^?ngModel', link: function(scope, iElement, iAttrs) { ... }, //compile 选项本身并不会被频繁使用,但是 link 函数则会被经常使用。
//当我们设置了 link 选项, 实际上是创建了一个 postLink() 链接函数, 以便 compile() 函数可以定义链接函数。
//compile 和 link 选项是互斥的。如果同时设置了这两个选项,那么会把 compile
//所返回的函数当作链接函数,而 link 选项本身则会被忽略。
//通常情况下,如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前
//进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
//用 link 函数创建可以操作DOM的指令。
//require 'SomeController',
//link: function(scope, element, attrs, SomeController) {
// 在这里操作DOM,可以访问required指定的控制器
//}
compile: function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
});

angular指令的详解就到这,如果想了解跟多请移步  angular官网https://docs.angularjs.org/

angular 自定义指令详解 Directive的更多相关文章

  1. angular自定义指令详解

    指令(directive)是angular里面最核心也是最难懂的东西,在慕课网看了下大漠穷秋老湿的视频,自己百度半天做了一些小test,总算把一切都搞明白了. 先列出学习来源: 指令中controll ...

  2. day3 自定义指令详解

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  3. AngularJs自定义指令详解(6) - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  4. AngularJs自定义指令详解(1) - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

  5. vue.js自定义指令详解

    写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...

  6. Vue.js 源码分析(二十四) 高级应用 自定义指令详解

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上 ...

  7. angularjs Directive自定义指令详解

    作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...

  8. AngularJs自定义指令详解(5) - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  9. AngularJs自定义指令详解(10) - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

随机推荐

  1. js字符串 数组处理

                /*字符串处理*/             var a="Hello world!"             console.log(a.indexOf(& ...

  2. 九天学会Java,第二天,算术运算

    算术运算 先回顾上次我们提到的编程特性 变量和数据类型,赋值和输出 算术运算 选择结构 循环结构 函数定义,函数调用 变量作用域 栈,程序运行的基石 面向对象 异常处理 语言提供的公用包 第一天我们讲 ...

  3. JTAG基础知识

    前言 本知识翻译收集来自http://www.fpga4fun.com,版权归原网站所有. 1.什么是JTAG:Joint Test Action Group:联合测试工作组 JTAG是一种IEEE标 ...

  4. poj3368 uva11235 Frequent values

    Description You are given a sequence of n integers a1 , a2 , ... , an in non-decreasing order. In ad ...

  5. Java面试准备之集合框架

    集合框架 Collection:List列表,Set集 Map:Hashtable,HashMap,TreeMap Collection 是单列集合 List 元素是有序的(元素存取是有序).可重复 ...

  6. [读书笔记] 二、条件注解@Conditional,组合注解,元注解

    一.条件注解@Conditional,组合注解,元注解 1. @Conditional:满足特定条件创建一个Bean,SpringBoot就是利用这个特性进行自动配置的. 例子: 首先,两个Condi ...

  7. 在shell脚本中使用alias

    Linux shell有交互式与非交互式两种工作模式.我们日常使用shell输入命令得到结果的方式是交互式的方式,而shell脚本使用的是非交互式方式.   shell提供了alias功能来简化我们的 ...

  8. 简单易学的SSM(Spring+SpringMVC+MyBatis)整合

    SSM(Spring+SpringMVC+MyBatis)的整合: 具体执行过程:1.用户在页面向后台发送一个请求 2.请求由DispatcherServlet 前端控制器拦截交给SpringMVC管 ...

  9. ASP.NET Core 运行原理解剖[4]:进入HttpContext的世界

    HttpContext是ASP.NET中的核心对象,每一个请求都会创建一个对应的HttpContext对象,我们的应用程序便是通过HttpContext对象来获取请求信息,最终生成响应,写回到Http ...

  10. C语言运算符运算顺序判断实例1

    程序1 #include <stdio.h> int main(void) { , j = , k = ; printf("%d\n", --j > i & ...