var app = angular.module("app",[]);
//第一个参数:指令的名称,使用驼峰命名
//第二个参数:回调函数,回调函数内部返回对象
app.directive("hiHello",function () {
return {
//执行的代码,参数,写在这里
}
});
directive的参数
restrict : String
设置自定义指令的html格式
restrict的取值表
| E| C | M | A |
|:---------------:|:------:|
| element | attribute | class | 注释 |
若其中有内容,则被替换掉
replace : Boolean or String
(布尔型)默认为false(模板内容会加载到标签内部),true(模板内容会替换当前标签),即是否替换当前元素中已有的内容
replace:true,
注意:如果使用M,必须得配合使用 replace(替换)
###priority : Number
优先级,可忽略,默认为0
注意: ng-repeat 的优先级为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用
###terminal : Boolean
如果为false,则Angular停止运行当前元素上比本指令优先级低的指令。优先级相同的指令还是会被执行
注意: ng-if 的优先级略高于 ng-view
priority和terminal的综合运用
Hello World!!!
template : String or Template Function
设置模板,必须设置
template:"随便写的信息
",
//template:function(tElement, tAttrs){...},
###templateUrl: String
(字符串或函数)
外部路径的字符串
接受两个参数的函数,参数为 tElement 和 tAttrs ,并返回一个外部HTML文件路径的字符串
模板加载后,AngularJS会将它默认缓存到$templateCach服务中。
注意:templateUrl 可以提前加载模块到缓存中,提高加载速度
templateUrl : "html/first.html",
###scope: Boolean or Object
当一个控制器实现多个数据时,就需要用到scope属性实现不同的数据。如果要创建一个能够从外部原型继承作用域的指令,将 scope 属性设置为 true
scope属性的独立作用域
为true时,从父作用域继承并创建一个自己的作用域
为false(默认)时,全部继承父作用域
1).controller属性
配置属于每个指令自己作用域上的数据(共有),而ng-controller 的作用就是从父级作用域继承并创建一个新的子作用域。
controller : function($scope){
$scope.age = 20
}
设置为一个对象,则能设置 隔离作用域, scope 属性设置为一个空对象 {} 。如果这样做了,指令的模板就无法访问外部作用域了,代码如下:
directive('myDirective', function() {
return {
restrict: 'A',
scope: {},
priority: 100,
template: 'Inside myDirective {{ myProperty }}'
};
});
隔离作用域
将scope属性设置为一个对象,而不是布尔值。隔离作用域默认和父作用域没关系,无法继承它的属性
1). 设置模板中数据的作用域和绑定规则:
|@| = |&|
|:---------------:|:------:|
| 把当前属性作为字符串传递 |与父作用域中的属性进行绑定素|与父作用域中的函数进行绑定|
"@" : 本地作用域属性:使用当前指令中的数据和DOM属性的值进行绑定
“=” : 双向绑定:本地作用域上的属性同父级作用域上的属性进行双向的数据绑定。
“&” : 父级作用域绑定:通过 & 符号可以对父级作用域进行绑定
scope : {
name : "@" //属性和标签内的属性写一样
}
scope: {
ngModel: '=', // 将ngModel同指定对象绑定
onSend: '&', // 将引用传递给这个方法
fromName: '@' // 储存与fromName相关联的字符串
}
transclude: Boolean
默认为false,需要创建一个可以包含任意内容的指令时, 才使用 transclude: true 。
注意:只要使用了 transclude 参数,那么在控制器(下面马上会介绍)中就无法正常监听数据模型的变化了
controller: String or function
controller: String or function(scope, element, attrs, transclude, otherInjectables) { ... }
注册在应用中的控制器的构造函数,使用函数创建内联控制器
angular.module('myApp',[]).directive('myDirective', function() {
restrict: 'A',
controller:function($scope, $element, $attrs, $transclude) {
// 控制器逻辑放在这里
}
})
controllerAs: String
可以在指令中创建匿名控制器
angular.module('myApp',[]).directive('myDirective', function() {
return {
restrict: 'A',
template: '{{ myController.msg }}
',
controllerAs: 'myController',
controller: function() {
this.msg = "Hello World"
}
};
});
require: String
(字符串或数组)字符串代表另外一个指令的名字,如果没有前缀,指令将会在自身所提供的控制器中进行查找,如果没有找到任何控制器(或具有指定名字的指令)就抛出一个错误。例如:
如果不使用 ^ 前缀,指令只会在自身的元素上查找控制器。
require: 'ngModel'
使用 ? 如果在当前指令中没有找到所需要的控制器,会将 null 作为传给 link 函数的第四个参数
require: '?ngModel'
使用 ^ 如果添加了 ^ 前缀,指令会在上游的指令链中查找 require 参数所指定的控制器。
require: '^ngModel'
使用 ^? 将前面两个选项的行为组合起来,我们可选择地加载需要的指令并在父指令链中进行查找。
require: '^?ngModel',
link和compile
link: link: function(scope, iElement, iAttrs) { ... },
compile: compile: function(tElement, tAttrs, transclude) { ... },
compile 选项本身并不会被频繁使用,但是 link 函数则会被经常使用。当我们设置了 link 选项, 实际上是创建了一个 postLink() 链接函数, 以便 compile() 函数可以定义链接函数。
compile 和 link 选项是互斥的。如果同时设置了这两个选项,那么会把 - compile所返回的函数当作链接函数,而 link 选项本身则会被忽略。
通常情况下,如果设置了 compile 函数,说明我们希望在指令和实时数据被放到DOM中之前进行DOM操作,在这个函数中进行诸如添加和删除节点等DOM操作是安全的。
//用 link 函数创建可以操作DOM的指令。
require : 'SomeController',
link: function(scope, element, attrs, SomeController) {
// 在这里操作DOM,可以访问required指定的控制器
}
compile: function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) { ... },
post: function(scope, iElement, iAttrs, controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
注意:指令的生命周期开始于 $compile 方法并结束于 link 方法