angular directive的简单使用总结


Posted in Javascript onMay 24, 2017

摘要

directive(指令)是angular的一个非常强大又有用的功能,它相当于实现了组件化的概念。我们可以通过它公共地自定义DOM元素或CLASS类或ATTR属性,并且在这基础上进行操作scope、绑定事件等等。将一些公共的模块或操作封装到指令中,然后就可以在html页面中编写简单的一行代码就可以加载整个公共模块,大大避免了代码的冗余。一般使用directive有以下场景:

  1. 使html更具有语义化,不需要深入研究和了解逻辑即可知道页面的大致逻辑;
  2. 抽象出一个自定义的组件,以便在其他地方可以进行复用。

下面我想通过一些实例结合分析对我所了解的directive进行一些简单的归纳总结(我所使用的是angular1.5.3):

一、Directive的使用

angular.module("app",[]).directive("directiveName",function(){
return{
//通过设置项来定义
};
})

二、一个简单的实例

html代码:

<!DOCTYPE html>
<html ng-app='helloApp'>
 <body>
  <hello></hello>
 </body>

 <script src="js/angular.min.js"></script>
 <script src="js/helloDirective.js"></script>
</html>

js代码:

var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '<div>Hello,friends!</div>',
  replace: true
 };
});

效果截图:

angular directive的简单使用总结

实例解析:

1、restrict:EACM的子集的字符串,它限制directive为指定的声明方式。

  1. E - 元素名称: <my-directive></my-directive>
  2. A - 属性名:<div my-directive=”exp”></div>
  3. C - class名: <div class=”my-directive:exp;”></div>
  4. M - 注释 : <!-- directive: my-directive exp -->

2、默认情况下,directive将仅仅允许通过属性声明,ECA较常用。

template:指令显示的模板内容,一般由html标签和文本组成。通常情况下html内容较简单的情况下使用,模板内容复杂的建议将公共部分抽离到html文件中,使用templateUrl属性。

templateUrl - 与template基本一致,但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。

3、replace:如果设置为true,那么模版将会替换当前元素,而不是作为子元素添加到当前元素中。(注:为true时,模版必须有一个根节点)

上述实例dom节点截图:

angular directive的简单使用总结

三、实例2:关于transclude

修改上面实例代码:

<!DOCTYPE html>
<html ng-app='helloApp' ng-controller="myController">
 <body>
  <hello>{{myName}}</hello>
 </body>

 <script src="js/angular.min.js"></script>
 <script src="js/helloDirective.js"></script>
</html>
var appModule = angular.module('helloApp', []);
appModule.directive('hello', function() {
 return {
  restrict: 'E',
  template: '<div>Hello,my name is <span ng-transclude></span></div>',
  replace: true,
  transclude:true
 };
});

效果截图:

angular directive的简单使用总结

angular directive的简单使用总结

解析:

transclude:指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。上述例子replace设置为true,模版将会替换当前元素。而transclude设置为true的作用可以简化地理解成:把<hello>标签替换成我们所编写的HTML模板,但是<hello>标签内部的内容保持不变。而<span ng-transclude></span>则是指明标签内部内容插入到模板内容的哪个位置。

四、实例3:关于compile,link和controller

实例代码:

phonecatDirectives.directive('exampleDirective', function() { 
 return { 
  restrict: 'E', 
  template: '<p>Hello {{number}}!</p>', 
  controller: function($scope, $element){ 
   $scope.number = $scope.number + "22222 "; 
  }, 
  link: function(scope, el, attr) { 
   scope.number = scope.number + "33333 "; 
  }, 
  compile: function(element, attributes) { 
   return { 
    pre: function preLink(scope, element, attributes) { 
     scope.number = scope.number + "44444 "; 
    }, 
    post: function postLink(scope, element, attributes) { 
     scope.number = scope.number + "55555 "; 
    } 
   }; 
  } 
 } 
}); 

//controller.js添加 
dtControllers.controller('directive2',['$scope', 
 function($scope) { 
  $scope.number = '1111'; 
 } 
]); 

//html 
<body ng-app="phonecatApp"> 
 <div ng-controller="directive2"> 
  <example-directive></example-directive> 
 </div> 
</body>

运行结果:

Hello 1111 22222 44444 55555!

由结果可以看出来,controller先运行,compile后运行,link不运行。

将上例中的compile注释掉的运行结果:

Hello 1111 22222 33333!

由结果可以看出来,controller先运行,link后运行,link和compile不兼容。

简单解析:

指令的控制器和link函数(后面会讲)可以进行互换。区别在于,控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为,且无法再指令间复用。

更多了解可以参考Angular官方站点:https://angularjs.org/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
javascript 三种编解码方式
Feb 01 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
jquery replace方法去空格
May 08 jQuery
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
深入理解JavaScript 参数按值传递
May 24 #Javascript
详解Angular 4.x NgTemplateOutlet
May 24 #Javascript
javascript简单写的判断电话号码实例
May 24 #Javascript
Angular2搜索和重置按钮过场动画
May 24 #Javascript
深入理解react-router@4.0 使用和源码解析
May 23 #Javascript
angularjs中ng-bind-html的用法总结
May 23 #Javascript
vue.js实现价格格式化的方法
May 23 #Javascript
You might like
深入php var_dump()函数的详解
2013/06/05 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php调用c接口无错版介绍
2014/03/11 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php静态文件生成类实例分析
2015/01/03 PHP
javascript 关闭IE6、IE7
2009/06/01 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
浅析vue深复制
2018/01/29 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
python负载均衡的简单实现方法
2018/02/04 Python
python绘制圆柱体的方法
2018/07/02 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
台湾东南旅游社网站:东南旅游
2019/02/11 全球购物
final, finally, finalize的区别
2012/03/01 面试题
静心口服夜广告词
2014/03/20 职场文书
班组建设经验交流材料
2014/05/12 职场文书
会计求职信范文
2014/05/24 职场文书
市场推广策划方案
2014/06/02 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
企业百日安全活动总结
2015/05/07 职场文书
党支部半年考察意见
2015/06/01 职场文书