Ⅵ.AngularJS的点点滴滴-- 指令
指令
基本用法
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div ng-controller="detail">
<input type="text" ng-model="test">
<label ui-a="test"></label>
</div>
<script>
var app = angular.module('app', [])
.directive('uiA',function() {
return function(scope, element, attr) {
element.addClass('ng-binding').data('$binding', attr.uiA);
scope.$watch(attr.uiA,function uiAWatchAction(value) {
element.html(value + "directive" || '');
});
}
}).controller('detail', ['$scope',function($scope) {
$scope.test = 1
}]);
angular.bootstrap(document, ['app']);
</script>
</html>这个是最基本的用法其中的指令匹配遵循以下原则
- 使用指令时可以在元素或者属性的前面可以添加x- 和 data-
- 忽略:,-,_分隔符,并且忽略大小写
或者用$compileProvider的directive方法创建指令，方法如下
angular.module('app', []).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
uiA: function() {
return function(scope, element, attr) {
element.addClass('ng-binding').data('$binding', attr.uiA);
scope.$watch(attr.uiA,
function uiAWatchAction(value) {
element.html(value || '');
});
}
}
});
}]);其中scope.$watch方法是监听对象的属性是否改变,里面的三个参数为
- scope 是angularjs作用域对象
- element 是指令匹配的jqlite对象
- attrs 是存放着这个对象的属性和属性操作的对象
高级用法(上面都是返回方法,这次是返回对象)
angular.module('app', []).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
uiA: function() {
return {
priority: 0,
terminal:true,
template:'',
templateUrl:'',
restrict:'AE',
scope: {
customer: '='
},
replcae:true,
link: {
pre: function preLink(scope, iElement, iAttrs, controller) {
},
post: function postLink(scope, iElement, iAttrs, controller) {
iElement.addClass('ng-binding').data('$binding', iAttrs.uiA);
scope.$watch(iAttrs.uiA,function uiAWatchAction(value) {
element.html(value || '');
});
}
},
compile: function compile(tElement, tAttrs, transclude) {
return {
pre: function preLink(scope, iElement, iAttrs, controller) { ... },
post: function postLink(scope, iElement, iAttrs, controller) { ... }
}
},
require:'',
transclude:true,
controlleras:'a',
controller: function($scope, $element, $attrs){
}
}
}
});
}]);
- priority权重默认是0,当包含多个指令的时候按照权重从大开始,其中Pre-link方法为从大到小,
post-link方法从小到大。当权限相同的时候目前测试结果是按照顺序- terminal当设置为true的时候比当前权重低的指令会失效，相同的会执行
- template和templateUrl的功能和前面的路由里面的一样
- replcae当true会替换当前指令的元素,false会替换元素innerHTML属性,
使用的时候模板必须有根节点,感觉只有restrict为E时有效- restrict,AE即匹配属性和元素名称,其中A为仅匹配属性,E为仅匹配元素名称,M匹配注释
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div g-controller="detail">
<ui-a info="test"></ui-a>
</div>
<script>
angular.module('app', []).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
uiA: function() {
return {
restrict: 'E',
replace:true,
scope: {
info: '=info'
},
template:'<div>{{info.name}},{{info.sex}}</div>'
}
}
});
}]).controller('detail', ['$scope',
function($scope) {
$scope.test = {name:'a',sex:'1'};
}]);
angular.bootstrap(document, ['app']);
</script>
</html>scope设置绑定指令的上下文,使用的时候必须要restrict为E,
当设置为true的时候指令之间是不共用一个上下文,应该默认为false
- {info: '=info'}获取属性为info的对象
- {info: '@info'}获取属性为info的值并且标签里面写成info="{{test}}
- {info: '&info'}里面写表达式,并且可以赋予参数
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div ng-controller="detail">
{{count}}
<ui-a info="count = count + amount"></ui-a>
</div>
<script>
angular.module('app', []).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
uiA: function() {
return {
restrict: 'E',
scope: {
info: '&info'
},
controller:function($scope){
$scope.info({amount:11});
}
}
}
});
}]).controller('detail', ['$scope',
function($scope) {
$scope.count =1;
}]);
angular.bootstrap(document, ['app']);
</script>
</html>controller为当前指令中的控制器对象,里面的第四个参数$transclude可以
设置transclude的元素和compile的第三个参数一样
4.transclude当设置为ture的时候指令原来的html插入到有ng-transclude的属性的元素,
默认为false,当设置为element的时候还未知...<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div>
<ui-a>Check out the contents</ui-a>
</div>
<script>
angular.module('app', []).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
uiA: function() {
return {
restrict: 'E',
transclude: true,
template: '<div class="alert" ng-transclude></div>'
}
}
});
}]);
angular.bootstrap(document, ['app']);
</script>
</html>- require用于请求其他的指令,在link的第四个参数注入,
^表示在dom模型上面的上一个节点,没有加表示是在同一个元素上面,
同级的不知何解,当前前面加上?表示不存在的时候不报错，
调用另一个控制器只能是声明this后的,如以下代码改成$scope.a=1则调用不到<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div>
<ui-b>
<ui-a></ui-a>
</ui-b>
</div>
<script>
angular.module('app', []).config(['$compileProvider',
function($compileProvider) {
$compileProvider.directive({
uiB: function() {
return {
restrict: 'E',
transclude:true,
controller: function($scope){
this.a=1;
},
template: '<div ng-transclude></div>'
}
},
uiA: function() {
return {
require: '^uiB',
restrict: 'E',
link: function(scope, element, attrs,uiBCtrl) {
console.log(uiBCtrl.a);
},
template: ''
}
}
});
}]);
angular.bootstrap(document, ['app']);
</script>
</html>- controlleras控制器的别名
- link里面的post方法就是前面的基本用法,如果存在compile,则link失效,
其中pre为连接前,post为连接后- compile主要用来处理模板的DOM ,返回的对象是一个link
<html ng-app="compile"><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script>
<div ng-controller="Ctrl">
<input ng-model="name"> <br>
<textarea ng-model="html"></textarea> <br>
<div compile="html"></div>
</div>
<script>
angular.module('compile', [], function($compileProvider) {
$compileProvider.directive('compile', function($compile) {
//新建一个link方法
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
//判断编译的表达式是否改变
return scope.$eval(attrs.compile);
},
function(value) {
//当编译的表达式改变重写
element.html(value);
//获得控制器的上下文以及表达式重新编译
$compile(element.contents())(scope);
}
);
};
})
});
function Ctrl($scope) {
$scope.name = 'Angular';
$scope.html = 'Hello {{name}}';
}
</script>
</html>- 下一篇：Ⅶ.AngularJS的点点滴滴-- 事件
- 上一篇：Ⅴ.AngularJS的点点滴滴-- 资源和过滤
- 本文链接地址：Ⅵ.AngularJS的点点滴滴-- 指令
Ⅵ.AngularJS的点点滴滴-- 指令的更多相关文章
- Ⅶ.AngularJS的点点滴滴-- 事件
事件(和js一样有冒泡和捕获) <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2 ...
- Ⅴ.AngularJS的点点滴滴-- 资源和过滤
资源ngResource(依赖ngResource模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ ...
- Ⅲ.AngularJS的点点滴滴-- 路由
路由ngRoute (需要依赖ngRoute模块) <html> <script src="http://ajax.googleapis.com/ajax/libs/ang ...
- Ⅰ.AngularJS的点点滴滴--引导
AngularJS已经被很多人像炒冷饭一样炒过啦,大部分都是直接复制官方文档没有说明一些注意事项,不过什么都要从头开始吧 页面引导实例化 1.自动实例化 <html> <script ...
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 使用Angularjs的ng-cloak指令避免页面乱码
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJS中Directive指令系列 - scope属性的使用
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部 ...
- 你知道用AngularJs怎么定义指令吗？
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...
随机推荐
- libSVM 参数选择
libSVM 参数选择 [预测标签,准确率,决策值]=svmpredict(测试标签,测试数据,训练的模型); 原文参考:http://blog.csdn.net/carson2005/art ...
- java.lang.UnsupportedClassVersionError（java项目版本一致问题）
报此错误,一般都是由于在myeclipse中的java项目是用高版本(jdk1.6之后)的jdk进行编译后生成的class文件,却要运行在低版本的jdk虚拟机上,导致这个错误 解决办法: 在myecl ...
- [转贴]实践:C++平台迁移以及如何用C#做C++包装层
终于有个C++ 如何调用C#类库的文章,收藏之 在前面,我们看过OpenTK与MOgre,这二个项目都是C#项目,但是他的实现都是C++.他们简单来说就是一个包装层.常见的包装方式有二种,一 种就是我 ...
- struts一点心得
action中: 设置属性并增加get,set方法,给属性赋值后 (如: private String name; public String getName() { return name; } p ...
- linux和windows双系统导致的时间日
我的博客:www.while0.com系统中有两种时间区分,一为UTC,另一为LT(地方时)两者的区别为时区不同,UTC就是0时区的时间,而我们当地是用的北京时间要慢8小时.linux采用的UTC时间 ...
- 【转】三十三、Android给ListView设置分割线Divider样式
原文网址:http://www.cnblogs.com/linjiqin/archive/2011/11/12/2246349.html 给ListView设置分割线,只需设置如下两个属性: andr ...
- Eclipse插件Subclipse各版本插件下载地址以及与Subverison的对应关系
Subclipse 1.4.x includes and requires Subversion 1.5.x client features and working copy format. Subc ...
- LoadRunner_Analysis(z) 分析
LoadRunner_Analysis(z) 分析 lr_Analysis(z) Analysis Summary Page Analysis Summary(分析总结页面) 分为三个部分: Stat ...
- (已解决 7.8号)leecode 分词利用词典分词 word break
不戚戚于贫贱,不汲汲于富贵 ---五柳先生 Given a string s and a dictionary of words dict, determine if s can be se ...
- 筛1-n中每个数的因子（nlogn）
void get_div() //筛因子 { ; i<maxn; i++) for(int j=i; j<maxn; j+=i) dx[j].push_back(i); }