AngularJs(五)指令

指令作为AngularJs的核心特性之一,也是AngularJs的一个难点。指令本质上就是AngularJs扩展具有自定义功能的HTML元素的途径。

一.内置指令

AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素,比如 <form> 和<a> 标签,当在HTML中使用标签时,并不一定能明确看出是否在使用指令。
例如, <form> 标签被从底层扩展了一系列高级功能,包括表单验证等,原生HTML表单并不会提供这些功能。

最后,某些内置指令并不会有对应的HTML标签,比如 ng-controller ,这个指令可以在标签的属性中使用,通常在包含很多子元素并且需要共享作用域时使用。
注意,所有以 ng 前缀开头作为命名空间的指令都是AngularJS提供的内置指令,因此不要把你自己开发的指令以这个前缀命名。

具体的指令用法可以参考AngularJS官方文档点击打开链接

二.自定义指令

AngularJS应用的模块中有很多方法可以使用,其中 directive() 这个方法是用来定义指令的:

angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserDefinedService) {
<span style="white-space:pre">	</span>// 指令定义放在这里
});
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: String,
priority: Number,
terminal: Boolean,
template: String or Template Function:
function(tElement, tAttrs) (...},
templateUrl: String,
replace: Boolean or String,
scope: Boolean or Object,
transclude: Boolean,
controller: String or
function(scope, element, attrs, transclude, otherInjectables) { ... },
controllerAs: String,
require: String,
link: function(scope, iElement, iAttrs) { ... },
compile: // 返回一个对象或连接函数,如下所示:
function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
});



  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值