频道导航

angular directive的简单使用总结

2019-01-07 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了angular directive的简单使用总结，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

摘要

directive（指令）是angular的一个非常强大又有用的功能，它相当于实现了组件化的概念。我们可以通过它公共地自定义DOM元素或CLASS类或ATTR属性，并且在这基础上进行操作scope、绑定事件等等。将一些公共的模块或操作封装到指令中，然后就可以在html页面中编写简单的一行代码就可以加载整个公共模块，大大避免了代码的冗余。一般使用directive有以下场景：

使html更具有语义化，不需要深入研究和了解逻辑即可知道页面的大致逻辑；
抽象出一个自定义的组件，以便在其他地方可以进行复用。

下面我想通过一些实例结合分析对我所了解的directive进行一些简单的归纳总结（我所使用的是angular1.5.3）：

一、Directive的使用

二、一个简单的实例

HTML代码：

js代码：

Hello,friends!

',replace: true }; });

效果截图：

实例解析：

1、restrict：EACM的子集的字符串，它限制directive为指定的声明方式。

E - 元素名称：
A - 属性名：
C - class名：
M - 注释：

2、默认情况下，directive将仅仅允许通过属性声明，ECA较常用。

template：指令显示的模板内容，一般由html标签和文本组成。通常情况下html内容较简单的情况下使用，模板内容复杂的建议将公共部分抽离到html文件中，使用templateUrl属性。

templateUrl - 与template基本一致，但模版通过指定的url进行加载。因为模版加载是异步的，所以compilation、linking都会暂停，等待加载完毕后再执行。

3、replace：如果设置为true，那么模版将会替换当前元素，而不是作为子元素添加到当前元素中。（注：为true时，模版必须有一个根节点）

上述实例dom节点截图：

三、实例2：关于transclude

修改上面实例代码：

var appModule = angular.module('helloApp',my name is

',replace: true,transclude:true }; });

效果截图：

解析：

transclude：指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。上述例子replace设置为true，模版将会替换当前元素。而transclude设置为true的作用可以简化地理解成：把标签替换成我们所编写的HTML模板，但是标签内部的内容保持不变。而则是指明标签内部内容插入到模板内容的哪个位置。

四、实例3：关于compile，link和controller

实例代码：

Hello {{number}}!

',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,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">

运行结果：

由结果可以看出来，controller先运行，compile后运行，link不运行。

将上例中的compile注释掉的运行结果：

由结果可以看出来，controller先运行，link后运行，link和compile不兼容。