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 中的对象和属性.通常使用这种直接共享的方式可以实现一些简 ...
随机推荐
- mui框架中底部导航的跳转2
接上一篇 还有一种方法就是在一心得页面中打开我们所需要的网页 代码如下: 向新的的页面穿值: 获取到新页面上的值:
- 基于struts2和hibernate的分页实现
在拜读了各位大牛的博客后,加以修改和添加总算是借鉴出了一个可行的分页实现.(●'◡'●) 话不多说,先贴两张效果图吧 接下来是实现代码: pagingDAOImpl.java public class ...
- PHP基础知识之魔术方法
__construct(), __destruct(), __call(), __callStatic(), __get(), __set(), __isset(), __unset(), __sle ...
- Ring0隐藏进程的方法
第一种在系统调用服务表HOOK ZwQuerySystemInformation函数地址 使用InterlockedExchange函数将ZwQuerySystemInformation在内核导出表K ...
- canvas初探3:画方画圆
绘制矩形的方法,strokeRect().fillRect()及clearRect(). 方法 描述 strokeRect(double x,double y,double w,double h) 使 ...
- Android内存清理
直接上图吧! 获取文件大小 ,清理文件工具类 public class DataCleanManager { public static String getTotalCacheSize(Contex ...
- Microsoft dotnetConf 2015 一些整理
dotnetConf 2015 直播计划: 第一天 (10 个主讲) - .NET Product Teams 主讲人为 .NET 产品开发团队,.NET 产品主要包含 .NET Core.ASP.N ...
- ASP.NET SignalR 高可用设计
在 One ASP.NET 的架构图中,微软将 WebAPI 和 SignalR 归类到 Services 类型与 MVC.Web Forms 同列为一等公民,未来的 ASP.NET 5 尽管还在be ...
- 关于GC和析构函数的一个趣题
这个有趣的问题感谢装配脑袋友情提供. 请看如下代码: public class Dummy { public static Dummy Instance; ; ~Dummy() { Instance ...
- 《Entity Framework 6 Recipes》中文翻译系列 (14) -----第三章 查询之查询中设置默认值和存储过程返回多结果集
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 3-6在查询中设置默认值 问题 你有这样一个用例,当查询返回null值时,给相应属性 ...