controller的用法分为两种情形,一种是require自定义的controller,由于自定义controller中的属性方法都由自己编 写,使用起来比较简单;另一种方法则是require AngularJS内建的指令,其中大部分时间需要require的都是ngModel这个指令。
在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流。举个简单的例子,假如我们现在需要编写两 个指令,在linking函数中有很多重合的方法,为了避免重复自己(著名的DRY原则),我们可以将这个重复的方法写在第三个指令的 controller中,然后在另外两个需要的指令中require这个拥有controller字段的指令,最后通过linking函数的第四个参数就可以引用这些重合的方法。代码的结构大致如下:
var app = angular.modeule('myapp',[]); app.directive('common',function(){ return { ... controller: function($scope){ this.method1 = function(){ }; this.method2 = function(){ }; }, ... } }); app.directive('d1',function(){ return { ... require: '?^common', link: function(scope,elem,attrs,common){ scope.method1 = common.method1; .. }, ... } });
当然,上面例子只是指令中controller用法的一种。虽然一般来说,使用controller字段的机会不是很多,但是想要写好AngularJS的指令,这是必须要掌握的一点。
引用内置指令
angular.module('myApp') .directive('spoint', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { var fibonacci = [1, 2, 3, 5, 8, 13, 20, 40, 80]; ctrl.$parsers.unshift(function(viewValue) { if (fibonacci.indexOf(parseInt(viewValue)) >= 0) { ctrl.$setValidity('fibonacci', true); return viewValue; } else { ctrl.$setValidity('fibonacci', false); return undefined; } }); } }; });
这里值得注意的是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
<input type="text" ng-model="length" name="length" smart-float /> {{length}}<br /> <span ng-show="form.length.$error.float">This is not a valid float number!</span>
js
var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/; app.directive('smartFloat', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(viewValue) { if (FLOAT_REGEXP.test(viewValue)) { ctrl.$setValidity('float', true); return parseFloat(viewValue.replace(',', '.')); } else { ctrl.$setValidity('float', false); return undefined; } }); } }; });
相关推荐
angularjs自定义指令directive,用做http地址校验和数字校验,仅供学习参考使用
主要介绍了AngularJS中directive指令使用之事件绑定与指令交互用法,结合实例形式分析了directive指令在模板的使用,事件的绑定及元素、属性、控制器之间的交互相关操作技巧,需要的朋友可以参考下
主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下
Dropzone.js 的 AngularJS 指令Dropzone.js 是一个有用的 javascript 库,用于将内容上传到服务器,这个 repo 使用指令在 angularjs 上完整实现了这个库。 用法很简单,你只需要复制指令和配置对象(对象在控制器中...
本篇文章给大家介绍在angularjs中自定义一个有关表格的directive,涉及到angularjs directive相关知识,对本文感兴趣的朋友一起学习吧
下面小编就为大家带来一篇angularJS利用directive实现移动端自定义软键盘的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
# AngularJS指令/控制器作为组件示例演示Web应用程序,用于显示 , , 集成需要本地Web服务器要正确运行Web应用程序,您需要具有本地Web服务器。 请参阅Git仓库的基本用法要获取母版的本地副本,请执行以下操作: ...
angular-round-progress-directive, 一个用于循环进度小部件的AngularJS指令 Angular 循环进度指令这里指令允许你使用一个循环的进程,感谢一个AngularJS指令。要求无任何相关性这里指令只需要可以显示画布的网页...
angularjs-指令-研讨会 JSSummit 的简单一步一步的 AngularJS 指令教程
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识,感兴趣的朋友一起学习吧
本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法。分享给大家供大家参考,具体如下: 一、Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...
CanvasJS-AngularJS指令 AngularJS的CanvasJS指令 需要库 安装 将chart.js文件放入您的项目目录 确保此文件包含在HTML标头中 编辑文件chart.js并将angular.module('your-module-here')更改为模块的名称 如下所述调用...
暂时有http的校验 和 纯数字的校验,代码共享
angular-directive.g-signin, 在按钮中,用于 Google + 符号的AngularJS指令 Angular Google Button按钮主页Google + 登录按钮的好开始位置。 指定你的客户 id,你就完成了。 几乎,你还需要为 event:google-plus-...
AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML。 AngularJS 通过内置的指令来为应用添加功能。 AngularJS 允许你自定义指令。 AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng...