AngularJs:Directive指令用法

时间 2019-11-12

标签 angularjs directive 指令用法栏目 AngularJS 繁體版

原文原文链接

摘自：http://www.jb51.net/article/83051.htmjavascript

摘要：Directive（指令）是AngularJ很是强大而有有用的功能之一。它就至关于为咱们写了公共的自定义DOM元素或CLASS属性或ATTR属性，而且它不仅是单单如此，你还能够在它的基础上来操做scope、绑定事件、更改样式等。经过这个Directive，咱们能够封装不少公共指令，好比分页指令、自动补全指令等等。而后在HTML页面里只须要简单的写一行代码就能够实现不少强大的功能。通常状况下，须要用Directive有下面的情景：
1. 使你的Html更具语义化，不须要深刻研究代码和逻辑便可知道页面的大体逻辑。
2. 抽象一个自定义组件，在其余地方进行重用。html

1、Directive的定义及其使用方法
AngularJs的指令定义大体以下java

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

Directive能够放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。（但不少directive都限制为“属性”的使用方式）express

以下一个实例：缓存

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
 <meta charset="UTF-8"> 
 <title>AngularJS入门学习</title> 
 <script type="text/javascript" src="./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 factory(injectables) { 
 return  { 
 　　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) { ... } 
}; 
}); 
</script> 
</html>

2、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 class='directiveName'></div>
M(注释)：<--directive:directiveName expression-->
通常状况下E/A/C用得比较多。
2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；服务器

3.terminal
（布尔型），可选参数，能够被设置为true或false，若设置为true，则优先级低于此指令的其余指令则无效，不会被调用(优先级相同的仍是会执行)app

4.template（字符串或者函数）可选参数，能够是：
（1）一段HTML文本异步

（2）一个函数，可接受两个参数tElement和tAttrs
其中tElement是指使用此指令的元素，而tAttrs则实例的属性，它是一个由元素上全部的属性组成的集合（对象）形如：
<hello-world2 title = '我是第二个directive'></hello-world2>
其中title就是tattrs上的属性函数

能够看到指令中还用到了hello-world2中的标签中的 title字段post

5.templateUrl（字符串或者函数），可选参数，能够是
（1）一个表明HTML文件路径的字符串

（2）一个函数，可接受两个参数tElement和tAttrs（大体同上）

注意：在本地开发时候，须要运行一个服务器，否则使用templateUrl会报错 Cross Origin Request Script（CORS）错误。因为加载html模板是经过异步加载的，若加载大量的模板会拖慢网站的速度，这里有个技巧，就是先缓存模板
你能够再你的index页面加载好的，将下列代码做为你页面的一部分包含在里面。

<script type='text/ng-template' id='hello.html'> 
 <div><h1>Hi ~~~</h1></div> 
</script>

这里的id属性就是被设置在templateUrl上用的。

6.replace
（布尔值），默认值为false，设置为true时候，HTML中 hello-world这个标签不在了，反之，则存在

7.scope
（1）默认值false。表示继承父做用域;

（2）true。表示继承父做用域，并建立本身的做用域（子做用域）;

（3）{}。表示建立一个全新的隔离做用域；

详细请参见

AngularJS 指令的 Scope (做用域)