AngularJs 指令directive之require

Posted 生命不息,奋斗不止!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs 指令directive之require相关的知识,希望对你有一定的参考价值。

controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单;另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令。

在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流。举个简单的例子,假如我们现在需要编写两 个指令,在linking函数中有很多重合的方法,为了避免重复自己(著名的DRY原则),我们可以将这个重复的方法写在第三个指令的 controller中,然后在另外两个需要的指令中require这个拥有controller字段的指令,最后通过linking函数的第四个参数就可以引用这些重合的方法。代码的结构大致如下:

Java代码  技术分享
  1. var app = angular.modeule(‘myapp‘,[]);  
  2.   
  3. app.directive(‘common‘,function(){  
  4.     return {  
  5.     ...  
  6.     controller: function($scope){  
  7.         this.method1 = function(){  
  8.         };  
  9.         this.method2 = function(){  
  10.         };  
  11.     },  
  12.     ...  
  13.     }  
  14. });  
  15.   
  16. app.directive(‘d1‘,function(){  
  17.     return {  
  18.     ...  
  19.     require: ‘?^common‘,  
  20.     link: function(scope,elem,attrs,common){  
  21.         scope.method1 = common.method1;  
  22.         ..  
  23.         },  
  24.     ...  
  25.     }  
  26. });  

当然,上面例子只是指令中controller用法的一种。虽然一般来说,使用controller字段的机会不是很多,但是想要写好AngularJS的指令,这是必须要掌握的一点。

 

引用内置指令

Java代码  技术分享
  1. angular.module(‘myApp‘)  
  2. .directive(‘spoint‘, function() {  
  3.   return {  
  4.     require: ‘ngModel‘,  
  5.     link: function(scope, elm, attrs, ctrl) {  
  6.       var fibonacci = [1, 2, 3, 5, 8, 13, 20, 40, 80];  
  7.       ctrl.$parsers.unshift(function(viewValue) {  
  8.         if (fibonacci.indexOf(parseInt(viewValue)) >= 0) {  
  9.           ctrl.$setValidity(‘fibonacci‘, true);  
  10.           return viewValue;  
  11.         } else {  
  12.           ctrl.$setValidity(‘fibonacci‘, false);  
  13.           return undefined;  
  14.         }  
  15.       });  
  16.     }  
  17.   };  
  18. });  

这里值得注意的是directive里link方法的第四个参数,我们在require里定义了ngModel 所以这里它是一个NgModelController

NgModelController是用来为ng-model提供了一组API。通过他我们可以他来确定ngModel的 值是否是合法的。 我们这里只介绍其中和表单验证有关的几个方法和属性。

上面的例子中我们用到了$parsers这个属性和$setValidity()这个方法。 $parsers里保存了一组function, 每当DOM里数据变化的时候, 这组function会被一次调用。这里给了我们机会在用户修改了DOM里值的时候, 去对新输入的值做校验。

 

“智能浮点(smart-float)”指令。它能把"1.2"或者"1,2"都转化为合法的浮点数"1.2"。注意,这里我们不能使用“数字输入类型”,因为html5的浏览器不允许用户输入像"1,2"这样的非法值。

html

Java代码  技术分享
  1. <input type="text" ng-model="length" name="length" smart-float />  
  2. {{length}}<br />  
  3. <span ng-show="form.length.$error.float">This is not a valid float number!</span>  

 js

Java代码  技术分享
  1. var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;  
  2. app.directive(‘smartFloat‘, function() {  
  3.   return {  
  4.     require: ‘ngModel‘,  
  5.     link: function(scope, elm, attrs, ctrl) {  
  6.       ctrl.$parsers.unshift(function(viewValue) {  
  7.         if (FLOAT_REGEXP.test(viewValue)) {  
  8.           ctrl.$setValidity(‘float‘, true);  
  9.           return parseFloat(viewValue.replace(‘,‘, ‘.‘));  
  10.         } else {  
  11.           ctrl.$setValidity(‘float‘, false);  
  12.           return undefined;  
  13.         }  
  14.       });  
  15.     }  
  16.   };  
  17. });  

以上是关于AngularJs 指令directive之require的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS之指令中controller与link

AngularJS自定义指令之可选参数replace

AngularJS学习笔记之directive——scope选项与绑定策略

angularjs之自己定义指令篇

[AngularJS] AngularJS系列 中级篇之指令

学习AngularJs:Directive指令用法(完整版)