建材CE认证:学习AngularJs:Directive指令用法(完整版)

日期:2017-12-26 / 人气: / 来源:原创

本教程使用AngularJs版本:1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下载地址:https://angularjs.org/

摘要:Directive指令)笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive,我们可以封装很多公共指令,CE认证,比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下,需要用Directive有下面的情景:
1. 使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件,在其他地方进行重用。

一、Directive的定义及其使用方法
AngularJs的指令定义大致如下

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

Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。(但很多directive都限制为“属性”的使用方式)

<span <span>directive-name</span><span>="exp"></span>//属性</span> <spanfont-family: Arial, Helvetica, sans-serif;">directive-name</span>: exp;"></span>//class <<span>directive-name</span>></<span>directive-name</span>>//元素 <!-- directive: <span>directive-name </span><span>exp -->//注释</span>

如下一个实例 :

<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> <script type="text/javascript" src="http://www.bitscn.com/school/Javascript/201605/1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: '<div>Hi 我是林炳文~~~</div>', replace: true }; }); </script> </html>

结果:

建材CE认证:学习AngularJs:Directive指令用法(完整版)


下面是一个directive的详细版

var myModule = angular.module(...); myModule.directive('directiveName', function factory(injectables) { var directiveDefinitionObject = {   priority: 0,   template: '<div></div>',   templateUrl: 'directive.html',   replace: false,   transclude: false,   restrict: 'A',   scope: false,   compile: function compile(tElement, tAttrs, transclude) {     return {       pre: function preLink(scope, iElement, iAttrs, controller) { ... },       post: function postLink(scope, iElement, iAttrs, controller) { ... }     }   },   link: function postLink(scope, iElement, iAttrs) { ... } }; return directiveDefinitionObject; });

二、Directive指令内容解读
可 以看到它有8个内容
1.restrict
(字符串)可选参数,指明指令在DOM里面以什么形式被声明;取值有:E(元素),A(属性),C(类),M(注释),其中默认值为A;当然也可以两个一起用,比如EA.表示即可以是元素也可以是属性。
[html] view plain copy 在CODE上查看代码片派生到我的代码片
E(元素):<directiveName></directiveName> 
A(属性):<div directiveName='expression'></div> 
C(类): <div></div> 
M(注释):<--directive:directiveName expression--> 
一般情况下E/A/C用得比较多。
2.priority
(数字),可选参数,指明指令的优先级,若在单个DOM上有多个指令,则优先级高的先执行;

3.terminal
(布尔型),可选参数,可以被设置为true或false,若设置为true,则优先级低于此指令的其他指令则无效,不会被调用(优先级相同的还是会执行)

4.template(字符串或者函数)可选参数,可以是:
(1)一段HTML文本

<!DOCTYPE html> <html lang="zh" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>AngularJS入门学习</title> <script type="text/javascript" src="http://www.bitscn.com/school/Javascript/201605/1.5.3/angular.min.js"></script> </head> <body> <hello-world></hello-world> </body> <script type="text/javascript"> var app = angular.module('myApp', []); app.directive('helloWorld', function() { return { restrict: 'E', template: '<div><h1>Hi 我是林炳文~~~</h1></div>', replace: true }; }); </script> </html>

建材CE认证:学习AngularJs:Directive指令用法(完整版)

作者:PTC


马上致电 021-68061963 OR 查看更多联系方式 →

Go To Top 回顶部