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延迟加载
Mar 09 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
JS中操作JSON总结
Dec 06 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
Jan 23 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 Javascript
深入理解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类
2006/10/09 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
php+js实现异步图片上传实例分享
2014/06/02 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
Javascript浅谈之this
2013/12/17 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python合并字符串的3种方法
2015/05/21 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
Reformation官网:美国女装品牌
2018/09/14 全球购物
三维科技面试题
2013/07/27 面试题
教育技术职业规划范文
2014/03/04 职场文书
授权委托书格式模板
2014/04/03 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
2014年店长工作总结
2014/11/17 职场文书
民事申诉状范本
2015/05/20 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android