转自：https://www.cnblogs.com/best/tag/Angular/

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用[命名空间-指令名称]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时 像这样：<my-directive>。

这里列出directive的合法命名：

  • ng:bind
  • ng-bind
  • ng_bind
  • x-ng-bind
  • data-ng-bind

我是教师，在新建试题输入分数的时候应该只能输入数字才对，输入其他内容是不合法的，而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性.我们定义一个叫做fractionNum的指令如下

  1. app.directive('fractionNum',function(){
  2. return {
  3. link : function(scope, elements, attrs, controller){
  4. elements[0].onkeyup = function(){
  5. if(isNaN(this.value) || this.value<1 || this.value>10){
  6. this.style.borderColor = 'red';
  7. }
  8. else{
  9. this.style.borderColor = '';
  10. }
  11. };
  12. }
  13. };
  14. });

link的值是一个函数，用来定义指令的行为。从传入的参数中可以获取到当前元素，我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件，获取元素的值，如果不是1~10之间的数字，则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了，使用方法如下：

  1. 分数:<input type="text" ng-model="question.fraction" fraction-num /><br />
 
 
controller，link，compile有什么不同

  1. //directives.js增加exampleDirective
  2. phonecatDirectives.directive('exampleDirective', function() {
  3. return {
  4. restrict: 'E',
  5. template: '<p>Hello {{number}}!</p>',
  6. controller: function($scope, $element){
  7. $scope.number = $scope.number + "22222 ";
  8. },
  9. //controllerAs:'myController',
  10. link: function(scope, el, attr) {
  11. scope.number = scope.number + "33333 ";
  12. },
  13. compile: function(element, attributes) {
  14. return {
  15. pre: function preLink(scope, element, attributes) {
  16. scope.number = scope.number + "44444 ";
  17. },
  18. post: function postLink(scope, element, attributes) {
  19. scope.number = scope.number + "55555 ";
  20. }
  21. };
  22. }
  23. }
  24. });
  25. //controller.js添加
  26. dtControllers.controller('directive2',['$scope',
  27. function($scope) {
  28. $scope.number = '1111 ';
  29. }
  30. ]);
  31. //html
  32. <body ng-app="phonecatApp">
  33. <div ng-controller="directive2">
  34. <example-directive></example-directive>
  35. </div>
  36. </body>

 运行结果：

  1. Hello 1111 22222 44444 55555 !

由结果可以看出来，controller先运行，compile后运行，link不运行(link就是compile中的postLink)。将上例中的compile注释掉运行结果：

  1. Hello 1111 22222 33333 !

由结果可以看出来，controller先运行，link后运行，link和compile不兼容。compile改变dom,link事件的触发和绑定

49.AngularJs 指令directive之controller，link，compile的更多相关文章

  1. 【转载】AngularJs 指令directive之controller，link，compile

    关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...

  2. AngularJs 指令 directive中link，controller 的区别

    其实严格来讲,link和controller是完全不同的概念,这里讲区别有点牵强. angular指令中,带有link和controller两个函数,很多人在写指令的时候不知道是写在link里 还是c ...

  3. AngularJS 指令生命周期 complie link

    AnguarJS指令从解析到生效一共会经历Inject.Compile.Controller加载.Pre-link.Post-link这几个主要阶段. 一.AngularJS指令执行过程 1.加载An ...

  4. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  5. AngularJS自定义Directive与controller的交互

    有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controlle ...

  6. angularJs 指令调用父controller某个方法

    1.父级controller:例如有个 init() 方法; 父级与子级的通信数据是$scope.controlFlag={}; 那么可以在父级controller里这样写:$scope.contro ...

  7. AngularJs 指令directive之require

    controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单:另一种方法则是require An ...

  8. Angularjs之directive指令学习笔记（二）

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  9. AngularJS的指令(Directive) compile和link的区别及使用示例

    如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...

随机推荐

  1. ASP.NET-POSTBACK是什么

    当我们直接从服务端读取网页时,表时此网页并没有post(提交),当用户再次提交表单时,就会把此网页的相关参数传给服务器处理,对于服务器来说就是一个postback(提交返回),即提交回来了.这就是po ...

  2. Android LaunchMode案例篇

    首先感谢小伙伴的关注.然后祝愿广大的情侣们节日快乐! 在开发中有时会遇到这种场景,用户点击注冊.第一步,第二步,完毕注冊跳转到登录界面,不须要用户一步一步的返回到登录界面.这是怎么实现的呢? 案例:有 ...

  3. hdu Escape

    Escape 题目: 非常裸的多重匹配. 可是点数较多,所以要用到状态压缩. . .. .. 第一次写. 好厉害的赶脚. #include <iostream> #include < ...

  4. 50个Android开发技巧(12 为控件加入圆角边框)

    控件的圆角边框能够使你的App看起来更美观,事实上实现起来也非常easy. (原文地址:http://blog.csdn.net/vector_yi/article/details/24463025) ...

  5. 火狐访问IIS出现404，而Chrome可以正常访问

    需要在web.config中的handlers中添加如下节点,保存之后,需要重启电脑. <remove name="ExtensionlessUrlHandler-Integrated ...

  6. pic中断特别说明

    在调试产品W660-MODBUS过程中发现,程序工作在偶然情况下会工作异常,经过将近一个礼拜的追踪,发现PIC中断有一下两个怪异特性: 在刚进入中断时就应该清除中断标志,如果在最后返回之前才清除标志, ...

  7. LCD段码驱动

    假如要第3个数码关显示“8.”,则3A-3D均得为1,即Seg3和Seg4均得为1.假设模具Seg和驱动芯片Seg对应,则只需往HT1621的地址Seg3和Seg4分半发送0xF. 注意:HT1621 ...

  8. HDU 2120 Ice_cream's world I【并查集】

    解题思路:给出n对点的关系,求构成多少个环,如果对于点x和点y,它们本身就有一堵墙,即为它们本身就相连,如果find(x)=find(y),说明它们的根节点相同,它们之间肯定有直接或间接的相连,即形成 ...

  9. php如何实现文件下载

    php如何实现文件下载 1. 设置超链接的href属性 <ahref="文件地址"></a> 如果浏览器不能解析该文件,浏览器会自动下载.而如果文件是图片或 ...

  10. Javascript平稳退化、渐进增强

    平稳退化 : javascript平稳退化就是如果一个浏览器完全不支持js或者禁用js的时候,它的基本功能不会受到任何影响.比方说一个网站使用了大量javascript来优化页面,我们现在把浏览器的j ...