AnagularJs之directive
前言:
昨日周六,再登梧桐山。六点半,起。未到顶,雨纷飞。冒雨行,终封顶,只为合照一张。五点半,下山行。聆听大自然的律动,双腿随其自然而颤抖!今早起,我的双腿犹如叛逆期的少年,或如领家的孩童,遂决定今天宅一天,为打发闲暇时光,写篇博文。
为什么要用directive?
ng的directive从字面上理解就是ng框架的一个指令。
假如我们发现要写很多公共或是重用的dom、class、attr属性或是需要操作scope作用域,就要考虑代码最好不要copy、不要出现重复的代码段,好像是哪位大牛说的话,具体记不清了,反正就是为了性能优化等方面。
说的更专业点就是:
- 使你的html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。
- 抽象一个自定义组件,在其他地方进行重用。
直接上代码:
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myModule = angular.module('nick',[]);
myModule.directive('hi', function() {
return {
template: '<p>my name is nick</p>',
replace: true,
restrict: 'E',
};
});
</script>
</body>
</html>
这就是我们常用的最简单的写法,其实有2种写法。
写法一:return写法(常用)
var myModule = angular.module();
myModule.directive('directiveName', function() {
return {
//内容
};
});
写法二:定义js域
var myModule = angular.module();
myModule.directive('directiveName', function() {
var myObj={
//内容
};
return myObj;
});
一般我们都是用第一种写法,下面以写法一为例:
var myModule = angular.module();
myModule.directive('directiveName', function() {
return {
priority: 0,
template: '<p>nick</p>',
templateUrl: 'nick.html',
replace: true,
transclude: true,
restrict: 'E',
scope: false,
controller:'someController',
controllerAs:'mainController',
compile: function compile(meElement, meAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) {},
post: function postLink(scope, iElement, iAttrs, controller) { }
}
},
link: function postLink(scope, iElement, iAttrs) { }
};
});
这是我总结出目前directive最全的参数了。下面对参数进行一一介绍:
directiveName
自定义directive指令的名字,应该做到见名知义,方便调用。
priority
(Number),可选参数(作为了解,使用几率极小)指明指令的优先级,当有多个directive定义在同一个DOM元素时,有时需要明确它们的执行顺序。这属性用于在directive的compile function调用之前进行排序。如果优先级相同,则执行顺序是不确定的(经初步试验,优先级高的先执行,同级时按照类似栈的“后绑定先执行”。另外,测试时有点不小心,在定义directive的时候,两次定义了一个相同名称的directive,但执行结果发现,compile或者link都执行)。
restrict
(String)可选参数,指明指令在DOM的声明形式;
取值:
- E(DOM元素)
- A(attr属性)
- C(class类)
- M(注释)
默认值为A;可以多个一起用,如EA.表示即可以是元素也可以是属性。
template(template和templateUrl二选一)
(Sting或Function) 可选参数,如果replace为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理。
写法一:(Sting)
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myModule = angular.module('nick',[]);
myModule.directive('hi', function() {
return {
restrict: 'E',
template: '<div><h1>Hi nick</h1></div>',
replace: true
};
});
</script>
</body>
</html>
写法二:(Fucntion)
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi1></hi1>
<hi2 title = 'directive2'></hi2>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var myModule = angular.module('nick',[]);
myModule.directive('hi1', function() {
return {
restrict: 'E',
template: '<div><h1>Hi nick</h1></div>',
replace: true
};
});
myModule.directive("hi2",function(){
return{
restrict:'E',
template: function(tElement,tAttrs){
var _html = '';
_html += '<div>' +'hello '+tAttrs.title+'</div>';
return _html;
}
};
});
</script>
</body>
</html>
虽然写法一为常用写法,但是写法二也应该了解。亲们,发现了么?写法二使用到了html中hi2标签的title属性。
templateUrl(template和templateUrl二选一)
(Sting或Function) 可选参数,如果replace为true,则将模版内容替换当前的HTML元素,并将原来元素的属性、class一并迁移;如果为false,则将模版元素当作当前元素的子元素处理。但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。
注意:
在本地开发时候,需要运行一个服务器,不然使用templateUrl会报错 Cross Origin Request Script(CORS)错误。由于加载html模板是通过异步加载的,若加载大量的模板会拖慢网站的速度,这里有个技巧,就是先缓存模板你可以再你的index页面加载好后,将下列代码作为你页面的一部分包含在里面。
<!DOCTYPE html>
<html ng-app="nick">
<head>
<meta charset="UTF-8">
<title>nick directive</title>
</head>
<body>
<hi></hi>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('nick', []);
app.directive('hi', function() {
return {
restrict: 'E',
templateUrl: 'hi.html',
replace: true
};
});
</script>
<script type='text/ng-template' id='hi.html'>
<div><h1>Hi nick</h1></div>
</script>
</body>
</html>
replace
(Boolean),默认值为false,设置为true时候,hi这个标签不在了,反之,则存在。这里比较简单,就不上代码了。
scope
- false(默认值):表示继承父作用域。
- true:表示继承父作用域,并创建自己的作用域(子作用域);如果在同一个元素中有多个directive需要新的scope的话,它还是只会创建一个scope。新的作用域规则不适用于根模版(root of the template),因此根模版往往会获得一个新的scope。
- {}:表示创建一个全新的隔离作用域;这对于创建可复用的组件是很有帮助的,可以有效防止读取或者修改父级scope的数据。这个独立的scope会创建一个拥有一组来源于父scope的本地scope属性的object hash。
结语:
scope是一个重点,也是坑出现最多的地方,我将在后面的博文中总结写我的理解!
还有controller、controllerAs、compile、link,可以看看这篇博客!
以上便是我对ng directive的理解,如有不当或许补充的地方,望各位多多评论、不吝赐教!
AnagularJs之directive的更多相关文章
- 步入angularjs directive(指令)--准备工作熟悉hasOwnProperty
在讲解directive之前,先做一下准备工作,为何要这样呢? 因为我们不是简单的说说directive怎么用,还要知道为什么这么用!(今天我们先磨磨刀!). 首先我们讲讲js 基础的知识--hasO ...
- 步入angularjs directive(指令)--点击按钮加入loading状态
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...
- Encountered an unexpected error when attempting to resolve tag helper directive '@addTagHelper' with value '"*, Microsoft.AspNet.Mvc.TagHelpers"'
project.json 配置: { "version": "1.0.0-*", "compilationOptions": { " ...
- VS2015突然报错————Encountered an unexpected error when attempting to resolve tag helper directive '@addTagHelper' with value 'Microsoft.AspNet.Mvc.Razor.TagHelpers.UrlResolutionTagHelper
Encountered an unexpected error when attempting to resolve tag helper directive '@addTagHelper' with ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Directive间的通信
Directive间的通信 源自大漠的<AngularJS>5个实例详解Directive(指令)机制 这个例子主要的难点在于如何在子Expander里面访问外层Accordion的sco ...
- angularjs中的directive scope配置
angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...
- AngularJS之Directive(三)
前言 angular核心部分如下图几大块,最重要的莫过于指令这一部分,本文将重点讲解指令这一部分,后续笔者将通过陆续的学习来叙述其他如:factory.service等,若有叙述错误之处,欢迎各位指正 ...
- AngularJS Directive 隔离 Scope 数据交互
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...
随机推荐
- cxf3.1.4所需jar,大部分都可以从cxf3.1.4的lib包下找到
asm-.jar commons-beanutils-.jar commons-collections-.jar commons-lang-2.6.jar cxf-core-.jar cxf-rt-b ...
- C# File.Delete文件时 提示:文件引起的访问被拒绝解决方案
new FileInfo(f).Attributes = FileAttributes.Normal; File.Delete(f);
- Underscore-分析
0.Ecmascript的版本重要时间点 Ecmascript262-3 1999年,ie5.5及以后完全支持,ff,chrome等全部支持Ecmascript262-4 因为跨越太大,废弃Ecmas ...
- androidannotations 简单复制与点击事件(1)
现在最火的android开发框架 简单描述一下 这一篇简单描述寻找控件以及事件的使用 1.该方法可以不用写setconteview @EActivity(R.layout.activity_main) ...
- Hadoop 2.6.0 Namenode HA,ResourceManager HA
先启动所有的zookeeper zkServer.sh start 在所有节点上启动JournalNode: sbin/hadoop-daemon.sh start journalnode 格式化第一 ...
- ABP理论学习之工作单元(Unit of Work)
返回总目录 本篇目录 公共连接和事务管理方法 ABP中的连接和事务管理 仓储类 应用服务 工作单元 工作单元详解 关闭工作单元 非事务的工作单元 工作单元方法调用其它 工作单元作用域 自动保存 IRe ...
- Backbone源码分析(三)
Backbone源码分析(一) Backbone源码分析(二) Backbone中主要的业务逻辑位于Model和Collection,上一篇介绍了Backbone中的Model,这篇文章中将主要探讨C ...
- Python黑帽编程2.6 模块
Python黑帽编程2.6 模块 我们已经学习了如何在你的程序中定义一次函数而重用代码.如果你想要在其他程序中重用很多函数,那么你该如何编写程序呢?你可能已经猜到了,答案是使用模块.模块基本上就是一个 ...
- [史上最全]C#(VB.NET)中位运算符工作过程剖析(译)
原文地址CodeProject 目录 介绍 “二进制-十进制”相互转换 十进制->二进制 二进制->十进制 OR运算符(按位或|) OR运算符工作方式 FlagsAttribute AND ...
- 关于大型网站技术演进的思考(二十)--网站静态化处理—web前端优化—中(12)
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...