脚本宝典收集整理的这篇文章主要介绍了angular自定义指令详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
在运用Angularjs的时候,运用自定义指令可以写一些组件,非常方便。这里给大家分享一些关于angular自定义指令的知识。
1. 定义
对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素 的功能。
2.定义指令的方法:
angular.module('myApp', [])
.directive('myDirective', function ($timeout, UserdefinedService) {
// 指令定义放在这里
});
第一个参数,指令的名字myDirective 用来在视图中引用特定的指令。
第二个参数是一个函数,这个函数返回一个对象,$compile服务利用这个方法返回的对 象,在DOM调用指令时来构造指令的行为。
3.指令设置的选项
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(...) { ... }
}
}; });
-
restrict 指令在DOM中可以何种形式被引用或声明
可选值如下: ( 可组合使用 )
E(元素) <my-directive></my-directive>
A(属性,默认值) <div my-directive="exPression"></div>
C(类名) <div class="my-directive:expression;"></div>
M(注释) <--directive:my-directive expression-->
priority 优先级 用来表示指令使用的优先顺序
如果一个元素上具有两个优先级相同的指令,声明在前面的那个会被优先调用。如果其中一 个的优先级更高,则不管声明的顺序如何都会被优先调用:具有更高优先级的指令总是优先运行。
-
terminal 用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令 优先级相同的指令还是会被执行。
<div ng-app="myApp" ng-controller="myCtr">
<!--此处在div上使用了两个自定义指令,作为属性存在,但directiveOne优先级高,而且设置了terminal属性,所以directiveSec指令并不会执行-->
<div directive-sec directive-One>
这是自定义指令
</div>
</div>
var myCtr=["$scope",function($scope){}]
var app=angular.module("myApp",[]);
app.controller("myCtr",myCtr);
app.directive("directiveOne",function(){
return {
restrict: "ECMA",
priority: 2,
terminal: true,
template:function(tElement, tAttrs){
tElement[0].style.fontSize="18px"; //设置字体
}
}
});
app.directive("directiveSec",function(){
return {
restrict: "ECMA",
priority: 1,
template:function(tElement, tAttrs){
tElement[0].style.color="red"; //设置颜色
}
}
});
-
template
用来表示模板,可以是一段字符串,如“<h1>这是自定义指令</h2>”,也可以是一个函数,可以参考上面的例子
template:function(tElement, tAttrs){
//tElement表示当前元素,是一个数组,tAttrs表示该元素的属性,是一个对象
tElement[0].style.color="red"; //设置颜色
}
templateUrl 用来表示模板,与上面的template功能相似,但表示路径,可以是外部HTML文件路径的字符串也可以是一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件 路径的字符串。
-
replace 默认为false,模板会被当作子元素插入到调用此指令的元素内部,为true,则直接替换此元素
<div some-directive></div>
.directive('someDirective', function() {
return {
template: '<div>some stuff here<div>'
}; });
<!-- 调用指令之后的结果如下(这是默认replace为false时的情况): -->
<div some-directive>
<div>some stuff here<div>
</div>
<!-- 如果replace被设置为了true: -->
.directive('someDirective', function() {
return {
replace: true // 修饰过
template: '<div>some stuff here<div>'
}; });
<!-- 指令调用后的结果将是: -->
<div>some stuff here<div>
-
scope
(1)当scope设置为true时,会从父作用域继承并创建一个新的作用域对象。
(2) 默认为false,并不会创建新的作用域对象,直接使用父scope。
(3)设置为{},表示隔离作用域,指令的 模板就无法访问外部作用域了
猜你在找的angularjs相关文章
-
在Angular中使用类Redux工具—ngrx/store
2019-06-13
-
AngularJs代码实例教程-Angular浏览器插件Batarang介绍及使用
2019-01-07
-
AngularJs代码实例教程-详解Angular6.0使用路由步骤(共7步)
2019-01-07
-
AngularJs代码实例教程-详解angular如何调用HTML字符串的方法
2019-01-07
-
AngularJs代码实例教程-angular中子控制器向父控制器传值的实例
2019-01-07
-
AngularJs代码实例教程-angularJS实现不同视图同步刷新详解
2019-01-07
-
AngularJs代码实例教程-angularjs通过过滤器返回超链接的方法
2019-01-07
-
AngularJs代码实例教程-详解angularjs跨页面传参遇到的一些问题
2019-01-07
-
AngularJs代码实例教程-浅谈ng-zorro使用心得
2019-01-07
-
AngularJs代码实例教程-Angular(5.2->6.1)升级小结
2019-01-07