本篇文章主要介绍了AngularJS自定义指令详解(有分页插件代码),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
前言
除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
通过 .directive() 函数来添加自定义的指令。
调用自定义指令时,需要在HTMl 元素上添加自定义指令名。
自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写。如: myDirective。
在html页面调用该指令时需要以 - 分割,如: my-directive。示例代码:
html页面调用自定义指令的四种方式
通过在自定义指令里添加 restrict 属性,根据设置不同的值来决定html页面的调用方式,如:
var app = angular.module("myApp", []); app.directive("myDirective", function() { return { restrict : "A",//只能通过属性调用 template : "自定义指令!
" }; });
restrict值的不同,决定了调用方式的不同
属性值 | 调用方式 | 示例 |
---|---|---|
A (Attribute首字母) | 属性名 | |
C (Class 首字母) | 类名 | |
E (Element 首字母) | 元素名 | |
M | 注释 |