angular directive的简单使用总结
摘要
directive(指令)是angular的一个非常强大又有用的功能,它相当于实现了组件化的概念。我们可以通过它公共地自定义DOM元素或CLASS类或ATTR属性,并且在这基础上进行操作scope、绑定事件等等。将一些公共的模块或操作封装到指令中,然后就可以在html页面中编写简单的一行代码就可以加载整个公共模块,大大避免了代码的冗余。一般使用directive有以下场景:
- 使html更具有语义化,不需要深入研究和了解逻辑即可知道页面的大致逻辑;
- 抽象出一个自定义的组件,以便在其他地方可以进行复用。
下面我想通过一些实例结合分析对我所了解的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 }; });
效果截图:
实例解析:
1、restrict:EACM的子集的字符串,它限制directive为指定的声明方式。
- E - 元素名称: <my-directive></my-directive>
- A - 属性名:<div my-directive=”exp”></div>
- C - class名: <div class=”my-directive:exp;”></div>
- M - 注释 : <!-- directive: my-directive exp -->
2、默认情况下,directive将仅仅允许通过属性声明,ECA较常用。
template:指令显示的模板内容,一般由html标签和文本组成。通常情况下html内容较简单的情况下使用,模板内容复杂的建议将公共部分抽离到html文件中,使用templateUrl属性。
templateUrl - 与template基本一致,但模版通过指定的url进行加载。因为模版加载是异步的,所以compilation、linking都会暂停,等待加载完毕后再执行。
3、replace:如果设置为true,那么模版将会替换当前元素,而不是作为子元素添加到当前元素中。(注:为true时,模版必须有一个根节点)
上述实例dom节点截图:
三、实例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 }; });
效果截图:
解析:
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/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 深入浅出 Retrofit,这么牛逼的框架你们还不来看看?
- nwui —— 又一个go语言图形界面解决方案
- Golang 通用连接池
- 解决JS操作Cookies出现的乱码问题,修复WordPress评论乱码
- 分享一个WordPress外链跳转教程,兼容知更鸟暗箱下载和文章索引
- 让WordPress RSS/Feed订阅数据延迟发布,附RSS技巧集锦
- Linux系统防CC攻击自动拉黑IP增强版Shell脚本
- 利用artDialog给网站添加一个能显示搜索来路和关键词的欢迎框
- 解决启用wp super cache缓存后,页面追加多个斜杠仍然可以访问的隐患
- WordPress集成底部滚动推荐条,让好文章不再被埋没
- go语言base64加密解密的方法
- WordPress酷炫CSS3读者墙,排名按年度、本月、本周划分的小方法
- WordPress给文章添加百度是否已收录查询和显示功能(自定义栏目优化版)
- PHP制作百度站内搜索绿色通道的网页列表数据文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在 istio 中限制 namespace 访问外部资源
- 【iOS】浅析近期越狱工具+“平刷”工具
- XGBoost Operator源码分析
- 【杂货】制作checkra1n启动盘思路
- 【iOS】chimera13指日可待,libhooker基板独立啦
- 类加载器之URLClassLoader
- 【iOS】较全的合并flex补丁教程
- R语言如何解决线性混合模型中畸形拟合(Singular fit)的问题
- spring代理对象都是代理对象吗
- R语言Markowitz马克维茨投资组合理论分析和可视化
- 支付业务优化else if 代码
- 在UBUNTU虚拟机上安装R软件包
- R语言逻辑回归和泊松回归模型对发生交通事故概率建模
- 万恶的NPE差点让我半个月工资没了
- R语言非参数模型厘定保险费率:局部回归、广义相加模型GAM、样条回归