学习AngularJs:Directive指令用法(完整版)_AngularJS
程序员文章站
2022-03-13 19:05:11
...
本教程使用AngularJs版本:1.5.3
',
replace: true
};
});
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址:https://angularjs.org/
摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性,并且它不只是单单如此,你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive,我们可以封装很多公共指令,比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下,需要用Directive有下面的情景:
1. 使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件,在其他地方进行重用。
一、Directive的定义及其使用方法
AngularJs的指令定义大致如下
angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; })
Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。(但很多directive都限制为“属性”的使用方式)
directive-name="exp">//属性 directive-name: exp;">//class directive-name>directive-name>//元素 //注释
如下一个实例 :
AngularJS入门学习
推荐阅读
-
AngularJS指令用法详解
-
AngularJS中directive指令使用之事件绑定与指令交互用法示例
-
Angularjs使用directive自定义指令实现attribute继承的方法详解
-
深入学习JavaScript的AngularJS框架中指令的使用方法
-
Angularjs自定义指令Directive详解
-
AngularJS基础 ng-dblclick 指令用法
-
AngularJS基础 ng-if 指令用法
-
AngularJS基础 ng-hide 指令用法及示例代码
-
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
-
AngularJS入门教程之ng-class 指令用法