【转载】AngularJs 指令directive之controller，link，compile
关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时 像这样：<my-directive>。
这里列出directive的合法命名：
- ng:bind
- ng-bind
- ng_bind
- x-ng-bind
- data-ng-bind
我是教师，在新建试题输入分数的时候应该只能输入数字才对，输入其他内容是不合法的，而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性.我们定义一个叫做fractionNum的指令如下
app.directive('fractionNum',function(){
return {
link : function(scope, elements, attrs, controller){
elements[0].onkeyup = function(){
if(isNaN(this.value) || this.value<1 || this.value>10){
this.style.borderColor = 'red';
}
else{
this.style.borderColor = '';
}
};
}
};
});
link的值是一个函数，用来定义指令的行为。从传入的参数中可以获取到当前元素，我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件，获取元素的值，如果不是1~10之间的数字，则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了，使用方法如下：
分数:<input type="text" ng-model="question.fraction" fraction-num /><br />
controller，link，compile有什么不同
//directives.js增加exampleDirective
phonecatDirectives.directive('exampleDirective', function() {
return {
restrict: 'E',
template: '<p>Hello {{number}}!</p>',
controller: function($scope, $element){
$scope.number = $scope.number + "22222 ";
},
//controllerAs:'myController',
link: function(scope, el, attr) {
scope.number = scope.number + "33333 ";
},
compile: function(element, attributes) {
return {
pre: function preLink(scope, element, attributes) {
scope.number = scope.number + "44444 ";
},
post: function postLink(scope, element, attributes) {
scope.number = scope.number + "55555 ";
}
};
}
}
}); //controller.js添加
dtControllers.controller('directive2',['$scope',
function($scope) {
$scope.number = '1111 ';
}
]); //html
<body ng-app="phonecatApp">
<div ng-controller="directive2">
<example-directive></example-directive>
</div>
</body>
运行结果：
Hello 1111 22222 44444 55555 !
Hello 1111 22222 33333 !
由结果可以看出来，controller先运行，link后运行，link和compile不兼容。compile改变dom,link事件的触发和绑定
【转载】AngularJs 指令directive之controller，link，compile的更多相关文章
- 49.AngularJs 指令directive之controller，link，compile
转自:https://www.cnblogs.com/best/tag/Angular/ 关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-cont ...
- AngularJs 指令 directive中link，controller 的区别
其实严格来讲,link和controller是完全不同的概念,这里讲区别有点牵强. angular指令中,带有link和controller两个函数,很多人在写指令的时候不知道是写在link里 还是c ...
- AngularJS 指令生命周期 complie link
AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS自定义Directive与controller的交互
有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...
- angularJs 指令调用父controller某个方法
1.父级controller:例如有个 init() 方法; 父级与子级的通信数据是$scope.controlFlag={}; 那么可以在父级controller里这样写:$scope.contro ...
- AngularJs 指令directive之require
controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require An ...
- [转载]AngularJS 指令 用法
http://book.2cto.com/201312/37782.html http://www.itnose.net/detail/6144038.html http://www.cnblogs. ...
- Angularjs之directive指令学习笔记（二）
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...
随机推荐
- jsp表格数据导出到Execl
1.关于“下载” 需要设置页面header的一个属性为:Content-Disposition: attachment; filename=下载的文件.txt 如: <a href=" ...
- linux下查看某软件是否已安装, ubuntu安装deb包
1.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa | grep “软件或者包的名字”. [root@hexuweb102 ~] rpm -qa | grep ...
- CEF使用的几个注意点
CEF为chrome浏览器的切入其他浏览器中的轻量级框架. 开发的客户端的时候,这是作为界面显示的首先,可以增强客户的易变性,可塑性. 在开发的过程中(侧重于C,C++解决),遇到的几个问题,以及自己 ...
- Educational Codeforces Round 14 D. Swaps in Permutation
题目链接 分析:一些边把各个节点连接成了一颗颗树.因为每棵树上的边可以走任意次,所以不难想出要字典序最大,就是每棵树中数字大的放在树中节点编号比较小的位置. 我用了极为暴力的方法,先dfs每棵树,再用 ...
- 每周一荐：学习ACE一定要看的书
作 者:david++发布时间:2012/06/08 09:02文章地址:http://game-lab.org/?p=320 近两个月都在学习ACE,一个超级强大,也超级复杂的网络框架库.对ACE的 ...
- Android开发--EditText的应用
1.简介 EditText主要用于数据的输入,验证等问题.例如,账号的注册,验证等等. 2.构建 如下图所示,在Text Fields有多种类型的数据输入框,我们创建图2所示的文本框,当点击按钮时,文 ...
- QML的一些基础的区分
什么时候用Item什么时候用Rectangle? 什么时候用Row什么时候用RowLayout? 这2个问题经常会让人迷糊. 什么时候用Item,就是你要做一个组件,这个组件是一个复合的组件,组件有部 ...
- w3school一个学习编程的好地方！
http://www.w3school.com.cn/index.html 每天过来学习几篇.
- CTSC&&APIO 2015 酱油记
在北京待了一周多,还是写点记录吧. 人民大学校园还是挺不错的,不过伙食差评. CTSC的题目太神,根本不会搞,一试20二试10分..本来都寄希望于提交答案题的..结果就悲剧了. 然后是听大爷们的论文答 ...
- WP8.1 Study18:动态磁贴
一.前言 动态磁贴在WindowsPhone8.1和Windows8.1都是其特色,有人喜欢有人讨厌,不过我觉得还是挺好的,可以让使用者很快知道App内的内容和吸引使用者打开App.下面来学习下怎样添 ...