zoukankan      html  css  js  c++  java

  • 49.AngularJs 指令directive之controller，link，compile

    转自：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的指令如下
    Java代码  收藏代码
    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之间的数字，则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了，使用方法如下：
    Java代码  收藏代码
    1. 分数:<input type="text" ng-model="question.fraction" fraction-num /><br />  
     
     
    controller，link，compile有什么不同
    Java代码  收藏代码
    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.   
    26. //controller.js添加  
    27. dtControllers.controller('directive2',['$scope',  
    28.     function($scope) {  
    29.         $scope.number = '1111 ';  
    30.     }  
    31. ]);  
    32.   
    33. //html  
    34. <body ng-app="phonecatApp">  
    35.     <div ng-controller="directive2">  
    36.         <example-directive></example-directive>  
    37.     </div>  
    38. </body>  
     运行结果：
    Java代码  收藏代码
    1. Hello 1111 22222 44444 55555 !    
     由结果可以看出来，controller先运行，compile后运行，link不运行(link就是compile中的postLink)。将上例中的compile注释掉运行结果：
    Java代码  收藏代码
    1. Hello 1111 22222 33333 !    
     由结果可以看出来，controller先运行，link后运行，link和compile不兼容。compile改变dom,link事件的触发和绑定
  • 相关阅读:
    选择适合自己的Markdown编辑器
    学习笔记
    读书笔记：Ajax/REST架构对于侵入式Web应用的优势
    scala学习之路(三)数组
    scala学习之路(二)控制结构和函数
    scala学习之路(一)基础
    Centos7下搭建Django+uWSGI+nginx基于python3
    java Date 和 数据库Date,DateTimed
    Java IO编程
    Hive内部表，外部表，分区表的创建
  • 原文地址：https://www.cnblogs.com/sharpest/p/8243831.html
Copyright © 2011-2022 走看看