自定义指令
angular.module('com.ngnice.app').directive('jobCategory'),function(){
return{
restrict : 'EA' , //指令的应用方式
replace: true ,//替换掉我们自定义的directive
transclude :true , //处理自定义指令中的子标签
scope : { } , //使用独立作用域
templateUrl : ' ' , //指定模版(引入外部文件)
template : ' ' , //指定模版
controller : function($scope){ } ,
require : ' ngModel ' , //这个元素上必须有一个ng-model属性,如果没有,会报错
// 链接,当前指令初始化的时候被自动执行
link : function(scope, element, attrs,ngModel /* 传入require的值 */ ){
//创建子作用域
var subScope = scope.$new(true);
//操作当前元素
element.on('click', function(){})
//操作元素上的值
attrs
}
priority : 2000 , //提高优先级
//编译
compile : function(){}
}
}
属性 | 属性值 | 说明 |
restrict | E 元素 A 属性 C 类名 M 注释 | restrict的取值可以是EACM这几个字母的任意组合,常用的是 E、A |
scope | 不指定(undefind)/false : 不需要新作用域 true : 需要一个新作用域,如果没有,创建一个 哈希对象{ } : 需要一个独立的(isolated)作用域 | 哈希对象的内容 : { //绑定字面量 Name : '@', 取值方式:attrs.name //绑定变量 Details : '=', 取值方式:scope.$eval(attrs.details) //绑定事件 onUpdate : '&' 取值方式:scope.$eval(attrs.onUpdate,{ times : 3 }) onUpdate中可以使用的参数名跟参数值都来自这个参数表 } |
模版 | templateUrl :指定模版(引入外部文件) template : 指定模版 |
|
controller |
| 直接写函数或引进外部controller |
transclude | true false | transclude主要完成以下工作,取出自定义指令中的内容(就是写在指令里面的子元素),以正确的作用域解析它,然后再放回指令模板中标记的位置(通常是ng-transclude标记的地方) eg: 1)自定义指令
2)html代码
3)页面输出及编译后的html结构
|
1、组件型指令
通常的写法: