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/
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Angular之指令Directive用法详解
项目筹备近期开启Angular学习,指令比较难理解所以记录备案,推荐视频大漠穷秋 Angular实战 由于篇幅过长,列举大纲如下: 一.指令directive概述 指令可以对元素绑定事件监听或者改变DOM结构而使HTML拥有像jQuery一样效果具有交互性.不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上. 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app="myApp&q
-
AngularJS中directive指令使用之事件绑定与指令交互用法示例
本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield
-
AngularJS中的Directive自定义一个表格
先给大家说下表格的需求: ● 表格结构 <table> <thead> <tr> <th>Name</th> <th>Street</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>></td> <td>></td> <td>>
-
学习AngularJs:Directive指令用法（完整版）
本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope.绑定事件.更改样式等.通过这个Directiv
-
AngularJs directive详解及示例代码
Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用directives Directive有驼峰式(camel cased)的风格的命名,如ngBind(放在属性里貌似用不了~
-
angular directive的简单使用总结
摘要 directive(指令)是angular的一个非常强大又有用的功能,它相当于实现了组件化的概念.我们可以通过它公共地自定义DOM元素或CLASS类或ATTR属性,并且在这基础上进行操作scope.绑定事件等等.将一些公共的模块或操作封装到指令中,然后就可以在html页面中编写简单的一行代码就可以加载整个公共模块,大大避免了代码的冗余.一般使用directive有以下场景: 使html更具有语义化,不需要深入研究和了解逻辑即可知道页面的大致逻辑: 抽象出一个自定义的组件,以便在其他地方可以
-
Angular实现一个简单的多选复选框的弹出框指令实例
之前的文章有写过包含树结构下拉框的. 要实现一个包含多个复选框的下拉框该如何做呢? 先上个效果图吧: 代码: <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css"
-
使用Angular.js实现简单的购物车功能
先给大家分享实现代码,在代码下面有效果图展示,大家可以两者结合参考下,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://code.angularjs.org/1.2.5/angular.min.js"></script
-
Angular directive递归实现目录树结构代码实例
整理文档,搜刮出一个Angular directive递归实现目录树结构代码实例代码,稍微整理精简一下做下分享. 效果图: 重点: 1. 整棵目录树的实现,通过嵌套完成,主要在于对treeItem.html的递归使用 <script type="text/ng-template" id="treeView.html"> <ul> <li ng-repeat="item in treeData.children" ng
-
Angular实现的简单查询天气预报功能示例
本文实例讲述了Angular实现的简单查询天气预报功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.min.js"></script> </head> <body ng-app="myApp&qu
-
Angular实现的简单定时器功能示例
本文实例讲述了Angular实现的简单定时器功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net Angular定时器</title> <script src="angular.min.js"></scrip
-
简单说说angular.json文件的使用
在Angular CLI 6+的版本后,原先的angular-cli.json就被换成了angular.json,而其中里面的字段变化挺大了,如果不了解基本的组成,或者直接把老版本的代码 copy 到新版本的工作空间中,会导致一些很不友好的错误. 这种变化主要还是因为Angular CLI引入了 monorepo (一个空间管理多个项目) 的开发模式,即使用ng new出来的相当于一个大的工作空间,通过angular.json配置来管理各种ng generate application | li
-
vue 中directive功能的简单实现
2018年首个计划是学习vue源码,查阅了一番资料之后,决定从第一个commit开始看起,这将是一场持久战!本篇介绍directive的简单实现,主要学习其实现的思路及代码的设计(directive和filter扩展起来非常方便,符合设计模式中的 开闭原则 ). 构思API <div id="app" sd-on-click="toggle | .button"> <p sd-text="msg | capitalize">
-
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
先说点闲话,熟悉Angular的猿们会喜欢这个插件的. 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业马上要交了,赶紧补补补.如今做这个项目,因为没找到合适的多选下拉Web插件,又不想用html自带的丑陋的<select multiple></select>,自己花了一整天时间做了一个.或许这样占用的主要功能开发的时间,开发起来会更有紧迫感吧.感觉自己是个抖M自虐倾向,并且伴
-
总结十个Angular.js由浅入深的面试问题
一.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的.而ng-if实际上控制dom节点的增删除来实现的.因此如果我们是根据不同的条件来进行dom节点的加载的话,那么ng-if的性能好过ng-show. 二.解释下什么是$rootScrope以及和$scope的区别? 通俗的说$rootScrope 页面所有$scope的父亲. 我们来看下如何产生$rootScope和$scope吧. step1:Angu